Uploader 文件上传

Uploader 文件上传

Q:如何设置选择图片时的展示样式

对于内部样式的提权，进行样式修改

.van-uploader__preview-image {
  width: 120rpx !important;
  height: 120rpx !important;
  border-radius: 10rpx !important;
}
.van-uploader__upload {
  width: 120rpx !important;
  height: 120rpx !important;
}

request.js

 /**
   * 文件上传
   */
class Request {

  constructor() {
    this._header = { };      // 请求头
    this._baseURL = 'XXXX';  // api_prefix
    this._fileURL = 'XXXX';  // upload_prefix
  }
  
  uploadFile(filePath, header = this._header) {
    const token = wx.getStorageSync('token');
    return new Promise((resolve, reject) => {
      header = { ...header, token: token };
      wx.uploadFile({
        url: `${this._fileURL}`,
        filePath: filePath,
        header: header,
        name: 'file',
        success: (res) => {
          if (res.statusCode === 200) {
            //200: 服务端业务处理正常结束
            resolve(JSON.parse(res.data));
          } else if (res.statusCode === 401) {
            // 401: 未授权
            loginFail();
          } else {
            //其它错误，提示用户错误信息
            if (this._errorHandler != null) {
              //如果有统一的异常处理，就先调用统一异常处理函数对异常进行处理
              this._errorHandler(res);
            }
            reject(res);
          }
        },
        fail: (err) => {
          if (this._errorHandler != null) {
            this._errorHandler(err);
          }
          reject(err);
        },
      });
    });
  }
}
const request = new Request();

export { request };

1. index.wxml

<view class="bg-white mt-16 pt-32 pb-32 pl-32">
  <block wx:if="{{imgUrl.length === 0}}">
    <!-- 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式 -->
    <van-uploader
      bind:after-read="afterRead"
      multiple
    >
      <view class="flex-row">
        <view class="add-wrap flex-center">
          <van-icon
            color="#999999"
            name="plus"
            size="54rpx"
          />
        </view>
        <view class="flex-column ml-30 justify-center">
          <text>添加图片</text>
          <text class="grey mt-23 fs-26">上传相关的图片</text>
        </view>
      </view>
    </van-uploader>
  </block>
  <block wx:else>
    <van-uploader
      bind:after-read="afterRead"
      bind:delete="deleteImg"
      file-list="{{ imgUrl }}"
      image-fit="aspectFill"
      max-count="{{maxCount}}"
      multiple
      upload-text="添加图片"
    ></van-uploader>
  </block>
</view>

<view
  bind:tap="saveRecord"
  class="flex-center"
>
  <van-button
    custom-class="mt-60 button-class {{textareaValue?'active-class':''}}"
    disabled="{{!textareaValue}}"
    round
  >保存</van-button>
</view>

2. index.js

import { request } from '../../../../../utils/request';

Page({
  data: {
    maxCount: 9,
    imgUrl: [],
    isClickSave: false, //用于节流阀
  },

  afterRead(event) {
    const { file } = event.detail;
    const imgUrl = [...this.data.imgUrl, ...file];
    this.setData({
      imgUrl,
    });
  },

  deleteImg(event) {
    const { index } = event.detail;
    this.data.imgUrl.splice(index, 1);
    this.setData({ imgUrl: this.data.imgUrl });
  },

  async saveRecord() {
    if (this.data.isClickSave) {
      return;
    }
    if (!this.data.textareaValue) {
      toastMsg('请输入');
      return;
    }
    this.data.isClickSave = true;
    let pictures = [];
    if (this.data.imgUrl.length > 0) {
      // 存储请求函数
      const promiseList = this.data.imgUrl.map((item) => {
        return request.uploadFile(item.path);
        // 1.5.0 版本为 path
        // 1.5.2 版本就变了，跟官网参数一致
      });
      //利用 Promise.all 获取所有请求后的值
      const imageData = await Promise.all(promiseList);
      pictures = imageData.map((image) => {
        if (image.success) {
          return image.data.url;
        }
      });
    }
    // 与后台交互
    //传值给后台
    //失败 就设置  this.data.isClickSave = false
  },
});

3. 注意事项

• 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
• file-list的数组要是一个对象数组，最后直接把{ file } = event.detail，把file解构push到数组里，如果直接传入图片地址组成字符串数组可能会出现图片显示不出来的情况

• 图片上传的选择可以是多选，但是图片要上传到后台变成线上图片只能一张张的上传,具体的操作方法时，先展示微信小程序的缓存图片给用户看，当用户确认上传时，再把请求函数放到一个数组中，然后通过Promise.all来拿到所有上传后的图片地址传给后台，前端展示的还是微信缓存的图片
• 对于编辑图片时，这时刚开始展示的都是线上地址，如果要新增图片时，展示的就变成了微信缓存地址，这时可以通过fileList(uploader组件的属性)这个对象数组中item.size来判断，如果有，就是新增的，需要上传，没有就不是，不能上传（wx.uploadFile的上传filePath只能是微信缓存地址）

async saveImgs() {
    let pictures = [];
    let arr = [];
    let promiseList = [];
    
if (this.data.fileList.length > 0) {
      for (let i = 0; i < this.data.fileList.length; i++) {
        let item = this.data.fileList[i];
        // 判断是否需要上传
        if (item.size) {
          promiseList.push(request.uploadFile(item.path));
        } else {
          pictures.push(item.path);
        }
      }
      if (promiseList.length > 0) {
        const imageData = await Promise.all(promiseList);
        arr = imageData.map((image) => {
          if (image.success) {
            return image.data.url;
          }
        });
        pictures = pictures.concat(arr);
      }
    }
}