一、功能定义
import { $apis } from '../../apis'
import axios from '../../http'
import uuid from 'uuid'
export default {
state: {},
getters: {},
mutations: {},
actions: {
getAllOss({commit }) { // 获取服务端传递过来的阿里oss签名
return new Promise((resolve, reject) => {
$apis.getSignatureInfo()//此处为封装的获取服务端相关参数的方法
.then((res) => {
resolve(res)
})
.catch((err) => {
reject(err)
})
})
},
setParams ({commit}, params) { // 设置请求参数
let formData = new FormData()
let filename = `${uuid.v4()}.${params.file.type.split('/')[1]}`
// 文件名字,可设置路径
formData.append('key', `${params.dir}${filename}`)
// policy规定了请求的表单域的合法性
formData.append('policy', params.policy)
// Bucket 拥有者的Access Key Id
formData.append('OSSAccessKeyId', params.accessid)
// 让服务端返回200,不然,默认会返回204
formData.append('success_action_status', '200')
// 根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性
formData.append('callback', params.callback)
formData.append('signature', params.signature)
formData.append('name', filename)
// 需要上传的文件filer
formData.append('file', params.file, filename)
return formData
},
upload({commit}, {url, data}) { // 上传文件
return new Promise((resolve, reject) => {
axios.post(url, data, {
headers: { 'Content-Type': 'multipart/form-data' }
})
.then((res) => {
resolve(res)
})
.catch((err) => {
reject(err)
})
})
},
delFile({commit}, params) { // 删除文件
return new Promise((resolve, reject) => {
$apis.removeOssFile(params)//封装的删除文件的方法
.then((res) => {
resolve(res)
})
.catch((err) => {
reject(err)
})
})
}
}
}
二、功能调用
这里使用的是Vue框架Element UI中的<el-upload>组件
<el-form-item label="正面" prop="front">
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:http-request="upload1">
<img v-if="dialogImageUrl" :src="$store.state.constant.aliHomeURLPath + dialogImageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
async beforeUpload(content) {//因为有两个方法使用到此部分,所以提出来一个方法
if (content.file.type.split('/')[0] !== 'image') {
this.$message.error({
message: '请上传图片格式文件',
})
return false
}
let params = await this.$store.dispatch('getAllOss').then(res => {//使用了Vuex
return res.data
})
params.file = content.file
let data = await this.$store.dispatch('setParams', params)
let url = params.host
return this.$store.dispatch('upload', {url, data}).then(res => {
return res;
})
},
upload1(content) {//上传图片的方法
this.beforeUpload(content).then(res => {
let filename = res.filename;
this.dialogImageUrl = filename;
this.form.billFront = filename;
this.$refs['form'].validateField('billFront')
})
},