119 lines
2.9 KiB
Vue
119 lines
2.9 KiB
Vue
<template>
|
||
<div>
|
||
<el-upload
|
||
action="http://xjs-cloud.oss-cn-hangzhou.aliyuncs.com"
|
||
:data="dataObj"
|
||
list-type="picture-card"
|
||
:file-list="fileList"
|
||
:before-upload="beforeUpload"
|
||
:on-remove="handleRemove"
|
||
:on-success="handleUploadSuccess"
|
||
:on-preview="handlePreview"
|
||
:limit="maxCount"
|
||
:on-exceed="handleExceed"
|
||
>
|
||
<i class="el-icon-plus"></i>
|
||
</el-upload>
|
||
<el-dialog :visible.sync="dialogVisible">
|
||
<img width="100%" :src="dialogImageUrl" alt />
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { policy } from "./policy";
|
||
import { getUUID } from '@/utils'
|
||
export default {
|
||
name: "multiUpload",
|
||
props: {
|
||
//图片属性数组
|
||
value: Array,
|
||
//最大上传图片数量
|
||
maxCount: {
|
||
type: Number,
|
||
default: 30
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
dataObj: {
|
||
policy: "",
|
||
signature: "",
|
||
key: "",
|
||
ossaccessKeyId: "",
|
||
dir: "",
|
||
host: "",
|
||
uuid: ""
|
||
},
|
||
dialogVisible: false,
|
||
dialogImageUrl: null
|
||
};
|
||
},
|
||
computed: {
|
||
fileList() {
|
||
let fileList = [];
|
||
for (let i = 0; i < this.value.length; i++) {
|
||
fileList.push({ url: this.value[i] });
|
||
}
|
||
|
||
return fileList;
|
||
}
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
emitInput(fileList) {
|
||
let value = [];
|
||
for (let i = 0; i < fileList.length; i++) {
|
||
value.push(fileList[i].url);
|
||
}
|
||
this.$emit("input", value);
|
||
},
|
||
handleRemove(file, fileList) {
|
||
this.emitInput(fileList);
|
||
},
|
||
handlePreview(file) {
|
||
this.dialogVisible = true;
|
||
this.dialogImageUrl = file.url;
|
||
},
|
||
beforeUpload(file) {
|
||
let _self = this;
|
||
return new Promise((resolve, reject) => {
|
||
policy()
|
||
.then(response => {
|
||
console.log("这是什么${filename}");
|
||
_self.dataObj.policy = response.data.policy;
|
||
_self.dataObj.signature = response.data.signature;
|
||
_self.dataObj.ossaccessKeyId = response.data.accessid;
|
||
_self.dataObj.key = response.data.dir + "/"+getUUID()+"_${filename}";
|
||
_self.dataObj.dir = response.data.dir;
|
||
_self.dataObj.host = response.data.host;
|
||
resolve(true);
|
||
})
|
||
.catch(err => {
|
||
console.log("出错了...",err)
|
||
reject(false);
|
||
});
|
||
});
|
||
},
|
||
handleUploadSuccess(res, file) {
|
||
this.fileList.push({
|
||
name: file.name,
|
||
// url: this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name； 替换${filename}为真正的文件名
|
||
url: this.dataObj.host + "/" + this.dataObj.key.replace("${filename}",file.name)
|
||
});
|
||
this.emitInput(this.fileList);
|
||
},
|
||
handleExceed(files, fileList) {
|
||
this.$message({
|
||
message: "最多只能上传" + this.maxCount + "张图片",
|
||
type: "warning",
|
||
duration: 1000
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
</style>
|
||
|
||
|