赞
踩
uni.uploadFile(OBJECT) | uni-app官网
上传图片不能使用uni.request因为data参数不支持fromData数据格式
- <template>
- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="4" width="180rpx" height="180rpx">
- <div class="addPic flex justify-center align-center"><u-icon name="plus" :bold="true" color="#172B4D" size="56rpx"></u-icon></div>
- </u-upload>
- </template>
-
- <script>
- export default {
- data() {
- return {
- fileList1: [],
- }
- },
- methods:{
- // 删除图片
- deletePic(event) {
- console.log(event);
- this[`fileList${event.name}`].splice(event.index, 1)
- },
- // 新增图片
- async afterRead(event) {
- // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
- let lists = [].concat(event.file)
- let fileListLen = this[`fileList${event.name}`].length
- lists.map((item) => {
- this[`fileList${event.name}`].push({
- ...item,
- status: 'uploading',
- message: '上传中'
- })
- })
- for (let i = 0; i < lists.length; i++) {
- const result = await this.uploadFilePromise(lists[i].url)
- let item = this[`fileList${event.name}`][fileListLen]
- this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
- status: 'success',
- message: '',
- url: result
- }))
- fileListLen++
- }
- },
- uploadFilePromise(url) {
- console.log("url", url, typeof(url));
- return new Promise((resolve, reject) => {
- let a = uni.uploadFile({
- url: `${config.baseUrl}/common/upload/uploadPicFile`, // 仅为示例,非真实的接口地址
- filePath: url,
- name: 'multipartFiles',//这个字段很重要,后端根据这个name获取二进制文件
- formData: {
- type: 11
- },
- success: (res) => {
- console.log("图片接口res", res);
- resolve(res.data.data)
- }
- });
- })
- },
- }
-
- }
- </script>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。