小程序weui图片上传

缺乏、安全感 2023-01-06 11:50 207阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

.wxml

<mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" bindselect="chooseImage" binddelete="deleteImg"
             select="{
       {selectFile}}" upload="{
       {uplaodFile}}" files="{
       {files}}" max-count="6" title="" tips="请上传整改好的图片">
             </mp-uploader>

.json

{
      "navigationBarTitleText": "整改完成",
      "usingComponents": {
        "mp-toptips": "weui-miniprogram/toptips/toptips",
        "mp-form": "weui-miniprogram/form/form",
        "mp-uploader": "weui-miniprogram/uploader/uploader",
        "mp-checkbox": "weui-miniprogram/checkbox/checkbox",
        "mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group",
        "mp-cells": "weui-miniprogram/cells/cells",
        "mp-cell": "weui-miniprogram/cell/cell"
      }
    }

.js

previewImage: function(e) {
        wx.previewImage({
          current: e.currentTarget.id, // 当前显示图片的http链接
          urls: this.data.files // 需要预览的图片http链接列表
        })
      },
      selectFile(files) {
        console.log('files', files)
        // 返回false可以阻止某次文件上传
      },
      uplaodFile(files) {
        console.log('upload files===========', files)
        // 文件上传的函数，返回一个promise
        return new Promise((resolve, reject) => {
          console.log(resolve);
          console.log(reject);
          let obj = {
            url: files.tempFilePaths[0]
          }
          this.setData({
            files: this.data.files.concat(obj),
            [`formData.selectFile`]: this.data.files.concat(obj)
          });
          console.log(this.data.files);
        })
      },
      uploadError(e) {
        console.log('upload error', e.detail)
      },
      uploadSuccess(e) {
        console.log('upload success', e.detail)
      },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20221119/9df505d934004e90abf29a4dbf09415e.png