uniapp中的uni-file-picker组件多图上传，删除，显示。以及C#.Net后端处理问题

Question

<uni-section title="图片上传" type="line">
  <view class="example">
    <view class="example-body">
      <uni-file-picker limit="9" v-model="imageValue" mode="grid" file-mediatype="image" :auto-upload="false" @select="selectImage">
      </uni-file-picker>
    </view>
  </view>
</uni-section>

methods: {
async selectImage(e) {
                var that = this;
                // console.log("选择图片：" + e.tempFilePaths);
                // 循环所有选择的图片
                for (let i = 0; i < e.tempFilePaths.length; i++) {
                    console.log("选择图片：" + e.tempFilePaths.length);
                    await that.uploadImg(e.tempFilePaths[i]);
                }
            },
            async uploadImg(tempFilePath) {
                var that = this;
                if (!tempFilePath) return;
                that.imageValue.push({
                    url: tempFilePath,
                    name: ""
                });
                const [err, {
                    data
                }] = await uni.uploadFile({
                    url: app.globalData.rqurl + '/InvoicingWeb/InvoicingController.aspx?method=getPictures',
                    filePath: tempFilePath,
                    name: 'file',
                    formData: {
                        'file_name': that.imageValue.length + ".jpg"
                    },
                    header: {
                        "Content-Type": "multipart/form-data",
                        "Content-Disposition": "form-data"
                    }
                });
                console.log("err", err)
                console.log("data：" + data);
                if (!that.isGuid(data)) {
                    // upload fail
                    that.imageValue.pop()
                    uni.showToast({
                        title: "上传失败",
                        icon: "none"
                    })
                } else {
                    // upload success
                    that.imageValue[that.imageValue.length - 1].name = data
                }
            },
            isGuid(str) {
                return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(str);
            },

public string getPictures()
    {
        Result rs = new Result();

        var postfiles = Request.Files;
        if (postfiles.Count <= 0)
        {
            rs.isok = false;
            rs.remark = "请选择图片";
            return JObject.FromObject(rs).ToString();
        }

        string path = Server.MapPath("~/uploadFile/image/");
        if (!Directory.Exists(path))
        {
            Directory.CreateDirectory(path);
        }

        // 循环所有上传的文件
        for (int i = 0; i < postfiles.Count; i++)
        {
            var postfile = postfiles[i];
            if (postfile == null || postfile.ContentLength <= 0)
            {
                continue;
            }

            string fileName = Path.GetFileName(postfile.FileName);
            string saveName = Guid.NewGuid().ToString() + Path.GetExtension(fileName);
            string savePath = Path.Combine(path, saveName);

            postfile.SaveAs(savePath);
        }

        rs.isok = true;
        rs.obj = "上传成功";
        return JObject.FromObject(rs).ToString();
    }

这是目前的代码，目前是选择了多张图片，但是到后面保存的时候只保存了一张，比如选了三张，只保存了一张。

需求是，选择了图片上传成功后再回显图片，然后保存了表单之后，重新进入页面从数据库读取显示图片，是需要用到这个手动上传this.$refs.files.upload()这个方法吗，目前是一选择就直接显示了

Answer 1

在前端 uni-app 中使用 uni-file-picker 组件，选择多个文件，并存储到本地数组。

<template>
  <view class="page">
    <view class="img-list">
      <view v-for="(item, index) in imgList" :key="index" class="img-item">
        <image :src="item" class="img-content"></image>
        <text class="del-icon" @click="delImg(index)">×</text>
      </view>
    </view>
    <uni-file-picker :multiple="true" @onChange="uploadImg"></uni-file-picker>
  </view>
</template>

JS部分代码

<script>
export default {
  data() {
    return {
      imgList: []
    };
  },
  methods: {
    uploadImg(e) {
      const tempFilePaths = e.detail.tempFilePaths;
      this.imgList = [...this.imgList, ...tempFilePaths];
    },
    delImg(index) {
      this.imgList.splice(index, 1);
    }
  }
};
</script>

C# 部分代码,在 C# .Net 后端中处理图片上传的请求，并存储到数据库或本地磁盘。

using System;
using System.IO;
using System.Web;

namespace ImageUploader
{
    public class ImageHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.Files.Count > 0)
            {
                HttpFileCollection files = context.Request.Files;
                for (int i = 0; i < files.Count; i++)
                {
                    HttpPostedFile file = files[i];
                    string fileName = context.Server.MapPath("~/UploadedImages/" + file.FileName);
                    file.SaveAs(fileName);
                }
            }
            context.Response.ContentType = "text/plain";
            context.Response.Write("Image(s) Uploaded Successfully");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}