先前准备:
axios、jquery、uuid使用npm安装
1.采用elementui的上传插件,注意两点,action置为空,http-request覆盖默认的上传行为
<el-upload
class="avatar-uploader"
action=""
:http-request='httpRequest'
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<img :src="formData.icon" alt class="fill" v-else/>
</el-upload>
2.上传文件前设置和覆盖默认的上传行为
// 上传文件之前的钩子
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if(!(isJPG || isPNG)){
this.$message.error('上传头像图片只能是 JPG或者PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return (isJPG || isPNG) && isLt2M;
},
// 覆盖elemen的上传函数
async httpRequest(item){
let result = await upload(item)
console.log(result)
},
3.封装上传函数,使用Promise对象
import axios from 'axios'
import { BASE_URL } from './index'
import * as $ from 'jquery';
import UUID from 'uuid';
// upload
export const upload = (item) => {
return new Promise((resolve, reject) => {
let ossTokenData = {}
getOssToken().then(res => {
if (res.data.code === 200) {
// oss返回数据
ossTokenData = res.data.data
console.log(ossTokenData)
console.log(item)
// 上传文件名称
let filename = item.file.uid + item.file.name
console.log(filename)
let formData = new FormData();
const key = ossTokenData.dir + UUID.v4().toString().replace(/-/g, '') + '.png';
//注意formData里append添加的键的大小写
formData.append('name', item.file.name);
formData.append('key', key); //存储在oss的文件路径
formData.append('OSSAccessKeyId', ossTokenData.accessKeyId); //accessKeyId
formData.append('policy', ossTokenData.policy); //policy
formData.append('signature', ossTokenData.signature); //签名
//如果是base64文件,那么直接把base64字符串转成blob对象进行上传就可以了
formData.append("file", item.file);
formData.append('success_action_status', '200'); //成功后返回的操作码
let url = ossTokenData.host
let fileUrl = ossTokenData.host + '/' + ossTokenData.dir + filename;
$.ajax({
url: url,
type: 'POST',
data: formData,
// async: false,
cache: false,
contentType: false,// 必须false才会自动加上正确的Content-Type
processData: false,// 必须false才会避开jQuery对 formdata 的默认处理
crossDomain: true,
success: function (data) {
console.log(fileUrl);
console.log(data);
resolve(data)
},
error: function (data) {
console.log(data);
reject(data)
}
});
}
})
})
}
//获取上传通行证
const getOssToken = params =>
axios({
url: BASE_URL + '/common/policy',
method: 'GET',
headers: {
'Authorization': sessionStorage.getItem("tokenHead") + ' ' + sessionStorage.getItem("token")
},
params
})
注意:通行证和ajax请求参数如图
图一: 通行证示例
图二:ajax请求参数示例