elementui php上传图片,基于vue-elementui的图片文件上传的高阶使用分享

前言

要求：

1、图片上传支持多图片上传 +多浏览器图片格式判断；

2、多图片同时ajax上传 通过防并发设置防止可能出现的覆盖；

3、图片实时上传后支持 在新窗口中打开查看；

使用

main.js

import Vue from 'vue';

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

app.vue

注意：代码中是页面中存在for循环很多上传项，我为了省事直接复制粘贴的实现，如果单项上传 就不用考虑了

class="upload-demo"

name="multipartFile"

:ref="'upload'+vv.c_id"

:multiple="true"

:accept="uploadAccept"

:action="uploadUrl"

:on-preview="uploadPreview"

:on-success="(res,file,fileList)=>{return uploadSuccess(res,file, fileList, vv)}"

:on-remove="(file,fileList)=>{return uploadRemove(file, fileList, vv)}"

:before-upload="(file)=>{return beforeUpload(file, vv)}"

:data="uploadData"

:auto-upload="true"

:limit="10"

:on-exceed="uploadExceed"

:disabled="!vv.isOpenUpload"

:file-list="vm.picList">

添加附件

只能上传jpg/png/pdf文件,且总数不超过10个

下载

export default {

name: "App",

data() {

return {

uploadAccept: "application/pdf,image/jpeg,image/png",//设置允许图片类型

uploadUrl: "http://xxx.com/uploadApi",//配置ajax上传api

uploadData: {

par: 'xxxx',//额外多传递的参数

},

uploadTime: 0,//上传时间

uploadTimeout: 0,//上传倒计时

uploadNow: '',//当前上传项

previewUrl: '',//预览项

}

},

computed: {//实时计算

loading(){

return this.$store.state.loading;

},

},

methods:{

beforeUpload(file, vv){

let vm = this;

//解决火狐浏览器无法从标签选择上屏蔽上传项

if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'application/pdf'){

vm.$message.error('只能上传jpg/png/pdf文件!');

return false;

}

//有效解决一次选择多个图片并发出现上传后回执url存在相同覆盖

let now = Date.now();

if(vm.uploadNow != vv.c_id){

vm.uploadNow = vv.c_id;

vm.uploadTimeout = 0;

}else{

if(now-vm.uploadTime>1000){

vm.uploadTimeout = 500;

}else{

vm.uploadTimeout += 1000;

}

}

vm.uploadTime = now;

return new Promise((resolve, reject) => {

setTimeout(function(){

vm.$store.dispatch('setLoading', true);

resolve(true);

},vm.uploadTimeout);

});

},

//文件上传成功

uploadSuccess(response, file, fileList, vv){

let vm = this;

let {code, result} = response;

if(code == 200 && result){

fileList.map(function(v){

if(v.url == file.url){

v.url = file.url = result;

}

});

vv.reports = fileList;

}

//vuex loading false

setTimeout(function(){

vm.$store.dispatch('setLoading', false);

},1000);

},

//文件超出

uploadExceed(files, fileList) {

this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);

},

//文件删除

uploadRemove(file, fileList, vv){

vv.reports = fileList;

},

//文件预览

uploadPreview(file){

let vm = this;

vm.previewUrl = file.url;

setTimeout(function(){

document.getElementById('fileLink').click();

},150);

},

},

}

校长红包福利