vue项目中使用element ui上传图片到七牛
1.获取token值
后台有接口调用直接返回token值
//请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await this.Fetch("/osg/resource/uploadtoken/image", { method: "get", }); console.log(uploadtoken); //赋值保存在本地 this.QiniuData.token= uploadtoken.data.token },
2.贴上页面代码
<template>
<div class="upload-info">
<div>
<el-upload
class="upload-pic"
:action="domain"
:data="QiniuData"
:on-remove="handleRemove"
:on-error="uploadError"
:on-success="uploadSuccess"
:before-remove="beforeRemove"
:before-upload="beforeAvatarUpload"
:limit="3"
multiple
:on-exceed="handleExceed"
:file-list="fileList"
>
<el-button size="small" type="primary">选择图片</el-button>
</el-upload>
<div>
<img class="pic-box" :src="uploadPicUrl" v-if="uploadPicUrl">
</div>
</div>
<div>
<el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
<el-button type="info" plain >取消</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
QiniuData: {
key: "", //图片名字处理
token: "" ,//七牛云token
data:{}
},
domain: "http://upload.qiniup.com", // 七牛云的上传地址（华东区）
qiniuaddr: "http://image.********.cn", // 七牛云的图片外链地址 七牛云空间的外链地址
uploadPicUrl: "", //提交到后台图片地址
fileList: []
};
},
mounted() {
this.getQiniuToken();
},
methods: {
handleRemove(file, fileList) {
this.uploadPicUrl = "";
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 张图片，如需更换，请删除上一张图片在重新选择！`
);
},
beforeAvatarUpload(file) { //图片上传之前的方法
// const isPNG = file.type === "image/png";
// const isJPEG = file.type === "image/jpeg";
// const isJPG = file.type === "image/jpg";
// const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isPNG && !isJPEG && !isJPG) {
// this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
// return false;
// }
// if (!isLt2M) {
// this.$message.error("上传头像图片大小不能超过 2MB!");
// return false;
// }
this.QiniuData.data = file;
this.QiniuData.key = `${file.name}`;
console.log(this.QiniuData.key)
},
uploadSuccess(response, file, fileList) { //图片上传成功的方法
console.log(fileList);
console.log(response);
console.log(file);
this.uploadPicUrl = `${this.qiniuaddr}/${response.key}`;
},
uploadError(err, file, fileList) { //图片上传失败时调用
this.$message({
message: "上传出错，请重试！",
type: "error",
center: true
});
},
beforeRemove(file, fileList) {
// return this.$confirm(`确定移除 ${ file.name }？`);
},
//提交数据到后台
handleSubmit() {
},
//请求后台拿七牛云token
async getQiniuToken() { //token
let uploadtoken = await this.Fetch("/osg/resource/uploadtoken/image", {
method: "get",
});
console.log(uploadtoken);
this.QiniuData.token= uploadtoken.data.token
},
}
};
</script>
