首先通过接口拿到后台给的上传权限,等需要的参数:
addfile(file) {
let filename = ''
if (this.breadcrumbList.length > 0) {
this.breadcrumbList.forEach(res => {
filename += '/' + res.folder_name
})
}
// console.log(filename)
this.fileList = [file]
const formData = new FormData()
// 注意formData里append添加的键的大小写
const url = 'flyPic' + filename + '/' + file.name
formData.append('key', 'flyPic' + filename + '/' + file.name) // 存储在oss的文件路径
formData.append('OSSAccessKeyId', this.aliyunOssToken.access_key) // accessKeyId
formData.append('policy', this.aliyunOssToken.policy) // policy
formData.append('Signature', this.aliyunOssToken.signature) // 签名
// 如果是base64文件,那么直接把base64字符串转成blob对象进行上传就可以了
formData.append('file', this.fileList[0])
formData.append('success_action_status', 200) // 成功后返回的操作码
this.onImportEmit(formData, file.name, url)
},
然后做一个最简单的axios请求:
onImportEmit(formData, filename, url) {
axios({
url: this.aliyunOssToken.host,//这里的地址就是oss的地址
method: 'POST',
data: formData,
withCredentials: false,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res => {
// console.log(res)
if (res.status === 200) {
// 成功回调
console.log('上传成功!')
} else {
// 失败回调
console.log('上传失败!')
}
}).catch((res) => {
// 失败回调
console.log('上传失败!')
}).finally(() => {
// 成功失败都会有的回调
console.log('上传!')
})
}
这里提示一点,上传成功之后oss不会返回对应的地址只会返回一个成功或失败的状态,具体看阿里云官网,所以后面添加到数据的地址需要 onImportEmit(formData, filename, url)方法里面的url去做处理。。