vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

2024-06-01 19:44| 来源: 网络整理| 查看: 265

上传文档格式

1 2 3 4 5 10 11 {{ item.name }} 12 {{ item.size | formatSize }} 13 14 15 22 23 24 25 提交 26 27 28 29 30 31 32 import { uploadFile, addResources } from "../../http/mock"; 33 import Toast from "vant"; 34 export default { 35 name: "uploadFile", 36 37 data() { 38 return { 39 tagList: [], 40 uploadTitle: "", 41 currentTag: null, 42 tagId: null, 43 columnName: localStorage.getItem("columnName"), 44 fileIdArr: [], 45 46 uploadDocList: [], // 选中的上传文档列表 47 }; 48 }, 49 filters: { 50 formatSize(val) { 51 // 格式化文件大小 52 if (val > 0) { 53 return (val / 1024 / 1024).toFixed(2) + "M"; 54 } else { 55 return "0M"; 56 } 57 }, 58 }, 59 methods: { 60 // vant上传文件前校验文件事件 61 // 文件选中后先提交给后台，后台根据选中的文件，返回数组（这一业务根据后台而定） 62 beforeRead(file) { 63 let formData = new FormData(); // 为上传文件定义一个formData对象 64 let config = { 65 headers: { 66 "Content-Type": "multipart/form-data", 67 }, 68 }; 69 this.uploadDocList.push(file); 70 this.uploadDocList.forEach((item) => { 71 formData.append(item.name, item); 72 }); 73 74 // formData.append(file.name, file); // 单个文件上传时可以这么写，上面的foreach就可以删掉 75 this.$api 76 .post(uploadFile, formData, config) 77 .then((res) => { 78 this.fileIdArr = res.data.data; // 把選中的文件傳送給後台 79 }) 80 .catch((err) => { 81 Toast("文件上傳失敗！"); 82 }); 83 }, 84 // 删除待上传的文件 85 delBtn(index) { 86 if (isNaN(index) || index >= this.uploadDocList.length) { 87 return false; 88 } 89 let tmp = []; 90 for (let i = 0; i < this.uploadDocList.length; i++) { 91 if (this.uploadDocList[i] !== this.uploadDocList[index]) { 92 tmp.push(this.uploadDocList[i]); 93 } 94 } 95 this.uploadDocList = tmp; 96 }, 97 doSubmit() { 98 let params = { 99 classify: this.tagId, // 针对视频资源时对应的分类id 100 file: this.fileIdArr, // 选择完文件后，调用uploadFile这个接口，后端返回的数组 101 resourceColumnId: JSON.parse(localStorage.getItem("columnId")), // 资源栏目id(视频、图片、音频、文档) 102 title: this.uploadTitle, // 上传时填写的标题 103 }; 104 105 this.$api 106 .post(addResources, params) 107 .then((res) => { 108 if (res.data.code === 1001) { 109 this.$router.push({ name: "myResourceClassify" }); 110 } 111 }) 112 .catch((err) => { 113 console.log(err); 114 }); 115 }, 116 }, 117 mounted() {}, 118 }; 119 120 121 .upload { 122 padding: 140px 36px 160px 36px; 123 box-sizing: border-box; 124 } 125 126 .forPreview_video { 127 position: relative; 128 /*background: rgba(0,0,0,.7);*/ 129 video { 130 width: 95%; 131 max-height: 430px; 132 } 133 .delte { 134 position: absolute; 135 right: 0; 136 bottom: 0; 137 } 138 } 139 .forPreview_doc, 140 .forPreview_audio { 141 display: flex; 142 margin-bottom: 10px; 143 align-items: center; 144 img { 145 width: 56px; 146 height: 56px; 147 margin-right: 20px; 148 } 149 span:nth-of-type(1) { 150 flex: 1; 151 } 152 span:nth-of-type(2) { 153 margin-right: 20px; 154 } 155 } 156 .forPreview_pic { 157 display: flex; 158 align-items: flex-end; 159 img { 160 width: 160px; 161 height: 160px; 162 } 163 } 164 165 .diy-detail { 166 width: 100%; 167 overflow: hidden; 168 169 .btn { 170 span { 171 margin-bottom: 10px; 172 } 173 } 174 .van-cell { 175 background-color: #f0f0f0; 176 border-radius: 35px; 177 font-size: 26px; 178 height: 69px; 179 line-height: 69px; 180 padding: 0 22px; 181 color: #999; 182 } 183 .van-hairline--top-bottom::after, 184 .van-hairline-unset--top-bottom::after { 185 border-width: 0; 186 } 187 p { 188 height: 64px; 189 line-height: 64px; 190 font-size: 32px; 191 color: #333; 192 position: relative; 193 padding-left: 16px; 194 } 195 p::before { 196 position: absolute; 197 top: 0; 198 left: 0; 199 content: "*"; 200 color: #ff0000; 201 } 202 203 span { 204 display: inline-block; 205 width: 157px; 206 background: #f0f0f0; 207 border-radius: 35px; 208 color: #999; 209 font-size: 26px; 210 padding: 14px 18px; 211 margin-right: 28px; 212 text-align: center; 213 } 214 .active { 215 color: #fff; 216 background: linear-gradient(to right, #fd5130, #fa6c34); 217 } 218 } 219 .diy-submit { 220 position: fixed; 221 height: 150px; 222 width: 90%; 223 bottom: 0; 224 background: #fff; 225 226 .van-button { 227 width: 100%; 228 height: 90px; 229 border-radius: 45px; 230 font-size: 36px; 231 color: #fff; 232 background: linear-gradient(to right, #fd5130, #fa6c34); 233 top: 50%; 234 transform: translate(0, -50%); 235 } 236 .van-button--default { 237 border: none; 238 } 239 } 240

https://www.jb51.net/article/171972.htm

【本文地址】

公司简介

联系我们