<input type="file" id="fileInput" multiple @change="handleFileUpload">
<el-progress class="progress" :percentage="Number(percentage)" v-if="percentage && percentage < 100" :color="customColors"></el-progress>
let endPoint = localStorage.getItem('endPoint') || '外网地址'
let Minio = require('minio')
let client = null;
let params = {
endPoint: endPoint,
useSSL: false,
accessKey: 'accessKey',
secretKey: 'secretKey'
}
if (endPoint === '内网地址') {
params.port = 9000;
} else {
delete params.port;
}
client = new Minio.Client(params);
async handleFileUpload (event) {
if (this.loading) {
return
}
const files = event.target.files;
this.loading = true;
for (let index = 0; index < files.length; index++) {
const files2 = files[index]
const params = {
files: files2,
prefix: '需要上传至minio的路径地址'
}
this.percentage = '0'
this.uploadFile(params, files.length)
}
},
async uploadFile (params, listLength) {
let file = params.files
let objectName = params.prefix
const fileName = objectName + file.name
const reader = new FileReader()
reader.onload = () => {
const fileData = new Uint8Array(reader.result)
const buffer = Buffer.from(fileData)
client.putObject('你的存储桶名字', fileName, buffer, (err, etag) => {
if (err) {
console.error(err)
return
}
this.successNum++;
if (listLength === this.successNum) {
this.percentage = 100;
setTimeout(() => {
this.maskMode = false
this.percentage = 0;
this.successNum = 0;
this.operatorType = 0
this.getList()
}, 300);
} else {
this.percentage = (((this.successNum) / (listLength + 1)) * 100).toFixed(2);
}
if (listLength === this.successNum) {
this.loading = false
this.getList()
}
})
}
reader.readAsArrayBuffer(file)
},
uploadImg (imgs, taskName) {
this.percentage = 0;
this.successNum = 0;
this.maskMode = true;
let imageUrl = imgs;
for (let index = 0; index < imageUrl.length; index++) {
const element = imageUrl[index];
getImage(element.img).then(res => {
let file = new File([res], element.imgName, { type: res.type });
const params = {
files: file,
prefix: this.itemList[1].name + '/' + taskName + '/',
}
this.uploadFile(params, imageUrl.length)
})
}
},
export async function getImage (url) {
const { data } = await axios({
method: "GET",
url: "/upload" + url,
responseType: "blob"
})
return data;
}
module.exports = {
devServer: {
hot: true,
disableHostCheck: true,
proxy: {
'/upload': {
target: "下载图片的地址源",
changeOrigin: true,
pathRewrite: {
'^/upload': ''
}
}
}
},
}