素材巴巴 > 程序开发 >

antd-vue - - - - - upload组件的使用

程序开发 2023-09-03 22:43:16

upload组件的使用

参数说明:
file:list : 上传列表数据
name: 上传时的key
data: 上传时额外的参数
header: 上传列表数据
actions: 上传接口地址
before-upload: 上传之前的回掉
change: 传文件改变时

在这里插入图片描述

// 变量定义updateData: { billId: "", fileType: "" },uploadLoading: false, // 是否正在上传loading: false,readonly: true,headers: { Authorization: localStorage.getItem("token") },action: "https://a.abc.com/api/file/uploadFile", // 上传地址accept: `.png, .jpg, .jpeg, .doc, .docx, .xls, .xlsx, .pdf`, // 拼接图片格式和需要支持的文件格式fileList: [],......// 资源上传之前const beforeUpload = file => {const fileType = file.name.split(".")[1];console.log("fileType: 上传之前:", fileType);};
 ...
 // 上传文件改变时的状态const handleChange = info => {uploadLoading = true;if (info.file.status !== "uploading") {// 正在上传}if (info.file.status === "done") {// 修改file-listlet resFileList = [...info.fileList];resFileList = resFileList.map(file => {if (file.response && !!file.response.success) {const { fileName, fileUrl } = file.response.data;file.name = fileName;file.type = fileName.split(".")[1];file.path = fileUrl;delete file.response;}return file;});fileList = resFileList;message.success("上传成功");uploadLoading = false;updateData.fileType = ""; // 上传结束 清除文件类型} else if (info.file.status === "error") {message.error("上传失败");uploadLoading = false;updateData.fileType = ""; // 上传结束 清除文件类型}};

标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。