Element 头像上传的实战
本篇文章用到 element官网 和 七牛云官网 element-ui 官网：https://element.eleme.io/#/zh-CN 七牛云官网：https://www.qiniu.com/ 1.七牛云注册 登录 之后 然后实名认证 2.进入对象存储后 进入空间管理 3.新建空间 在这里就能拿到 cdn测试域名 python SDK 在开发者中心可以查看 使用七牛云 就需要安装他 pip install qiniu 我们使用封装的思想 进行封装使用 文件名：comm.py # 七牛云 from qiniu import A
### JavaScript 源代码：Element 头像上传的实战
#### 一、项目背景与环境搭建
本实战项目主要介绍了如何使用 Element UI 和七牛云服务实现头像上传功能。Element UI 是一套基于 Vue.js 的桌面端组件库，提供了一系列易于使用的组件帮助开发者快速构建美观的网页应用；而七牛云则提供了强大的云端存储解决方案，适用于多种应用场景。
#### 二、七牛云注册及配置
1. **注册与登录**：
- 首先访问七牛云官网 [https://www.qiniu.com/](https://www.qiniu.com/)，进行注册并登录。
- 完成实名认证，以便能够使用全部功能。
2. **对象存储配置**：
- 登录后，在控制台导航栏选择“对象存储”。
- 进入“空间管理”，点击“新建空间”，按照提示完成创建。
- 创建完成后，可以获得该空间的 CDN 测试域名，用于后续的上传操作。
3. **Python SDK 安装**：
- 使用七牛云 API 进行开发时，需要安装其 Python SDK。通过命令 `pip install qiniu` 安装。
4. **Python 封装示例**：
- 创建一个名为 `comm.py` 的文件，用于封装七牛云的操作。
```python
from qiniu import Auth
access_key = 'your_access_key'
secret_key = 'your_secret_key'
def qn_token():
q = Auth(access_key, secret_key)
bucket_name = 'your_bucket_name'
token = q.upload_token(bucket_name)
return token
```
#### 三、Django 后端接口开发
1. **获取 Token 接口**：
- 在 Django 项目中创建一个视图类，用于返回上传所需的 Token。
```python
from django.views import APIView
from utils.comm import qn_token
class GetQnToken(APIView):
def get(self, request):
token = qn_token()
return Response({'code': 200, 'token': token})
```
- 配置 URL 路由，使前端可以通过 HTTP 请求获取 Token。
```python
urlpatterns = [
path('gettoken/', views.GetQnToken.as_view())
]
```
#### 四、Vue 前端开发
1. **使用 Element UI 组件**：
- 在 Vue 项目中安装 Element UI，并在项目中引入相关组件。
- 使用 `<el-upload>` 组件实现头像上传功能。
```html
<el-upload
class="avatar-uploader"
action="http://up-z1.qiniu.com/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:data="postData">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
```
2. **Vue 实例方法**：
- `getToken()` 方法用于获取 Token。
- `handleAvatarSuccess(res, file)` 方法处理上传成功后的逻辑。
- `beforeAvatarUpload(file)` 方法用于上传前对文件进行验证。
```javascript
methods: {
getToken() {
axios.get('sadmin/gettoken/').then(res => {
this.postData.token = res.data.token
})
},
handleAvatarSuccess(res, file) {
this.imageUrl = 'cdn测试域名' + res.key;
console.log(this.imageUrl)
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
},
created() {
this.getToken()
}
```
3. **样式调整**：
- 对 `<el-upload>` 组件进行必要的样式调整，使其更加美观。
```css
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
```
通过以上步骤，我们不仅实现了基于 Element UI 和七牛云服务的头像上传功能，还学习了如何在前后端之间传递数据、如何使用 Vue.js 处理上传事件等重要技术点。此实战案例对于理解前端组件库的使用以及云存储服务集成有很好的参考价值。
