1.以阿里云为例,先创建api文件
import request from '@/utils/request'
// 上传文件到阿里云
export function uploadOssFile(file,type) {
let param = new FormData(); //创建form对象
param.append("file", file);
return request({
url: '/ossService/Certification?type='+ type,
headers: { // 设置请求头
"Content-Type": file.type === 'text/plain' ? 'txt/plain;charset=utf-8' : "multipart/form-data"
},
dataType: 'JSON',
cache: false, // 不缓存
processData: false, // jQuery不要去处理发送的数据
contentType: false,
method: 'post',
timeout: 100 * 1000,
data: param,
success: function(res) {
//console.log(res)
}
})
}
//根据文件名下载文件
export function downloadOssFile(name) {
return request({
url: '/ossService/filedownload?fileName=' + name,
method: 'get'
})
}
//根据文件名下载文件
export function deleteOssFile(name) {
return request({
url: '/ossService/filedelete?fileName=' + name,
method: 'get'
})
}
2.引入页面
import { uploadOssFile } from "@/api/system/oss";
3.设定上传文件和预览方法
return {
img: "", // 预览图片地址
fileList: [], // 上传的图片地址
srcList: [],
imgopen: false, // 是否是图片预览
loading: false, // 遮罩层
};
// 上传文件
Uploadile(file) {
// 允许上传的文件格式列表
let acceptList = [
"jpg",
"jpeg",
"png",
"gif",
"doc",
"docx",
"pdf",
"xlsx",
"xls",
];
// 根据文件名获取文件的后缀名
let fileType = file.name.split(".").pop().toLowerCase();
// 判断文件格式是否符合要求
if (acceptList.indexOf(fileType) === -1) {
this.$message.error("上传文件类型不正确!");
return false;
}
this.uploadFile(file);
},
uploadFile(file) {
uploadOssFile(file, "mt").then((response) => {
if (response.response == "success") {
this.msgSuccess("上传成功");
this.fileList.push(response);
this.formData.collectionVoucher = this.fileList;
}
});
},
// 预览
yulan(val) {
this.img = "";
this.srcList = [];
this.imgopen = false;
let value = val.split(",")[0];
let valueFormat = value.substring(value.lastIndexOf(".") + 1);
if (
valueFormat == "doc" ||
valueFormat == "docx" ||
valueFormat == "xls" ||
valueFormat == "xlsx"
) {
window.open(
"https://view.officeapps.live.com/op/view.aspx?src=" + value,
"_blank"
);
} else if (valueFormat == "txt" || valueFormat == "pdf") {
window.open(value, "_blank");
} else if (
valueFormat == "jpg" ||
valueFormat == "png" ||
valueFormat == "jpeg" ||
valueFormat == "gif"
) {
this.img = value;
this.imgopen = true;
this.srcList[0] = value;
}
},
4.在HTML里设置上传和删除附件功能
<el-form-item label="附件上传">
<el-upload
action=""
class="avatar-uploader"
multiple
:before-upload="(file) => Uploadile(file)"
>
<el-button size="small" icon="el-icon-upload2"
>点击上传</el-button
>
<div slot="tip" class="el-upload__tip">
支持上传图片、pdf、doc、docx、xls、xlsx文件
</div>
</el-upload>
<div
class="pdf mb"
v-for="(item, index) in fileList"
:key="item.uid"
>
<div class="img_url" @click.prevent="yulan(item.name)">
{{ urlName(item.name) }}
</div>
<el-button
size="mini"
type="text"
@click="beforeRemove(item, index)"
>删除</el-button
>
</div>
</el-form-item>
5.提交页面时处理上传路径,需要改为字符串形式
submitForm() {
// 上传
let enclosureList = [];
this.fileList.forEach((item) => {
enclosureList.push(item.name);
});
this.formData.collectionVoucher = enclosureList.join(); //处理多图上传
this.$refs["formData"].validate(async (valid) => {
if (valid) {
this.loading = true;
try {
await addClaim(this.formData);
this.msgSuccess("新增成功");
this.$router.push("collection");
} catch (error) {
this.msgError("新增失败");
} finally {
this.loading = false;
}
}
});
},
6.在详情页处理渲染格式
// 数据
getlist(id) {
getCollection(id).then((response) => {
this.formData = response.data;
// 处理多图上传
this.formData.collectionVoucher = response.data.collectionVoucher.split(',')
});
},
<div>
<div
v-for="item in formData.collectionVoucher"
:key="item.uid"
@click.prevent="yulan(item)"
>
{{ urlName(item) }}
</div>
</div>
7.展示结果