vue上传pdf文件至服务器u盘,vue + elementui upload上传图片到服务器以及保存后回显问题...

前言：

关于vue和elementui安装导入使用不做介绍

1.template中首先展示upload多张图片上传

action="https://jsonplaceholder.typicode.com/posts/"

list-type="picture-card"

:on-preview="handlePictureCardPreview"

:on-remove="handleRemove"

:auto-upload="false"

:on-change="addFile"

:file-list="showFiles" //编辑时显示图片的精髓

ref="upload"

>

确 定

取 消

2.当upload组件发生改变时处罚addFile

//upload 改变时 触发的函数 主要目的为保存 filelist 和 大小限制

addFile(file, fileList) {

this.files = fileList;//主要用于接收存放所有的图片信息

//限制上传文件为2M

var sizeIsSatisfy = file.size < 2 * 1024 * 1024 ? true : false;

if (sizeIsSatisfy) {

return true;

} else {

this.fileSizeIsSatisfy = true;

return false;

}

},

3.图片提交到服务器，拿到服务器的数据地址

submitForm(formName) {//提交form表单

this.$refs[formName].validate(valid => {

if (valid) {

if (this.files.length <= 0) {

this.$message.error("请至少上传一个文件！");

return;

}

if (this.fileSizeIsSatisfy) {

this.$message.error("上传失败！存在文件大小超过2M！");

return;

}

this.processFile();//处理files的数据变成键值对的形式 返回newFiles这个数组

var param = new FormData(); // FormData 对象

newFiles.forEach(fileItem => {

var list = fileItem;

var file = list.imgFile;

param.append("files", file); // 文件对象

});

getImgUrl(param).then(

msg => {

console.log(msg);//拿到想要的图片地址

},

error => {

console.log(error);

}

);

} else {

console.log("error submit!!");

return false;

}

});

},

//全部的图片添加到 newFiles中

processFile() {

this.files.forEach(item => {

let objFile = {};

objFile.title = "files";

objFile.imgFile = item.raw;

this.newFiles.push(objFile);

});

},

3.显示图片 将拿到的数据放进一个数组中显示到file-list中去就好了

openModal(val, data) {

let fileArr = [];

let fileObj = {};

fileObj.name="file";

fileObj.url = data.file;

fileArr.push(fileObj);

this.showFiles = fileArr,

},

至此，完结。

有不对的地方欢迎指导哦。