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

上传文档格式

  1 <template>
  2   <div>
  3     <div class="upload">
  4       <div>
  5         <div
  6           class="forPreview_doc"
  7           v-for="(item, index) in uploadDocList"
  8           :key="index"
  9         >
 10           <img src="../../assets/img/resource_doc_b@2x.png" alt="" />
 11           <span>{{ item.name }}</span>
 12           <span>{{ item.size | formatSize }}</span>
 13           <van-icon name="delete" @click="delBtn(index)" class="delte" />
 14         </div>
 15         <van-uploader
 16           v-show="uploadDocList.length < 2"
 17           preview-size="80px"
 18           accept=".doc, .docx, .xml, .xlsx, .pdf"
 19           :before-read="beforeRead"
 20           :after-read="afterRead"
 21         ></van-uploader>
 22       </div>
 23
 24       <div class="diy-submit">
 25         <van-button @click="doSubmit($event)">提交</van-button>
 26       </div>
 27     </div>
 28   </div>
 29 </template>
 30
 31 <script>
 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 </script>
120 <style lang="less" scoped>
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 </style>

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