第32章 uView多文件上传

1 WebApi.Controllers.ProductController

using Microsoft.AspNetCore.Mvc;

using Microsoft.Net.Http.Headers;

using WebApi.Data;

using WebApi.Domain.Catalog;

namespace WebApi.Controllers

{

    [ApiController]

    [Route("[controller]/[action]")]

    public class ProductController : ControllerBase

    {

        private readonly EFCoreContext _eFCoreContext;

        private readonly IHttpContextAccessor _httpContextAccessor;

        private readonly IWebHostEnvironment _webHostEnvironment;

        public ProductController(EFCoreContext eFCoreContext,

         IHttpContextAccessor httpContextAccessor,

         IWebHostEnvironment webHostEnvironment)

        {

            _eFCoreContext = eFCoreContext;

            _httpContextAccessor = httpContextAccessor;

            _webHostEnvironment = webHostEnvironment;

        }

        private string GetAbsoluteAvatarUrl(string virtualAvatarUrl)

        {

            string absoluteAvatarUrl = string.Empty;

            var hostHeader = string.Empty;

            if (_httpContextAccessor.HttpContext.Request.IsHttps)

            {

                hostHeader = "https://" + _httpContextAccessor.HttpContext.Request.Headers[HeaderNames.Host];

            }

            else

            {

                hostHeader = "http://" + _httpContextAccessor.HttpContext.Request.Headers[HeaderNames.Host];

            }

            if (string.IsNullOrEmpty(virtualAvatarUrl))

            {

                absoluteAvatarUrl = hostHeader + "/images/Product/Default.jpg";

            }

            else

            {

                absoluteAvatarUrl = hostHeader + virtualAvatarUrl;

            }

            return absoluteAvatarUrl;

        }

        #region CURD

        [HttpGet]

        public List<Product> ProductList()

        {

            var productList = _eFCoreContext.ProductDbSet.ToList();

            for (int i = 0; i < productList.Count; i++)

            {

                var pictureList = _eFCoreContext.PictureDbSet.Where(p=>p.ProductId.Equals(productList[i].Id)).ToList();

                for (int j = 0; j < pictureList.Count; j++)

                {

                    pictureList[j].VirtualPath = GetAbsoluteAvatarUrl(pictureList[j].VirtualPath);

                }

                productList[i].PictureCollection = pictureList;

            }

            return productList;

        }

        /// <param name="id">1个指定产品的长整型值。</param>

        /// <param name="formFileCollection">多个指定的上传文件实例的集合。</param>

        /// <summary>

        /// 【上传多个文件--无需权限】

        /// </summary>

        /// <remarks>

        /// 摘要：

        ///     把多个指定的上传文件从客户端上传到服务器端的指定目录中。

        /// 说明(elmentUI Upload组件)：

        ///   1、如果使用头属性字典传递customerId参数实例，则不用使用“[FromForm]”标记，

        /// URL为：this.actionRequestUrl = "https://localhost:7239/Customer/PostAvatarStream?customerId=" + this.formUser.id;

        ///   2、如果使用“:data/:form-data”传递customerId参数实例，则必须使用“[FromForm]”标记，否则customerId参数实例会一直为:0，

        /// URL为：this.actionRequestUrl = "https://localhost:7239/Customer/PostAvatarStream"。

        /// 注意：

        ///   formFileCollection参数实例在多文件上传中1次只包含1个指定的上传文件实例。

        /// </remarks>

        /// <returns>

        /// 返回：

        ///     多个指定的上传文件上传操作后的状态信息。

        /// </returns>

        [HttpPost]

        public bool PostAvatarStream([FromForm] long id, IFormFileCollection formFileCollection)

        {

            if (formFileCollection != null)

            {

                foreach (IFormFile formFile in formFileCollection)

                {

                    if (formFile.Length > 0)

                    {

                        string _avatarDirectory = _webHostEnvironment.WebRootPath + @"\images\Product\"+id+ @"\";

                        string _filePath = string.Empty;

                     

                         string _filename = Guid.NewGuid().ToString() + Path.GetExtension(formFile.FileName);

                        _filePath = _avatarDirectory + _filename;

                        using FileStream fileStream = new FileStream(_filePath, FileMode.Create);

                        formFile.CopyTo(fileStream);

                        Picture picture = new Picture();

                        picture.ProductId = id;

                        picture.VirtualPath= $"/images/Product/{id}/{_filename}";

                        _eFCoreContext.PictureDbSet.Add(picture);

                        _eFCoreContext.SaveChanges();

                    }

                }

                return true;

            }

            return false;

        }

        #endregion

    }

}

2 pages\Product\ProductList\ProductList.vue

<template>

    <view class="content">

        <u-table>

            <u-tr>

                <u-td width="100rpx"> 编号</u-td>

                <u-td width="700rpx">名称</u-td>

                <u-td width="320rpx">封面</u-td>

                <u-td>图集</u-td>

            </u-tr>

            <u-tr v-for="(item, index) in list" :key="index">

                <u-td width="100rpx">{{ item.id }}</u-td>

                <u-td width="700rpx">{{ item.name }}</u-td>

                <u-td width="320rpx" v-for="(itemCoverImage, indexCoverImage) in item.pictureCollection"

                    :key="indexCoverImage">

                    <view v-if="itemCoverImage.coverImage">

                        <!-- <u-image width="280rpx" height="280rpx" :src="itemCoverImage.virtualPath"></u-image> -->

                        <!-- 如果使用“u-upload ”组件本身显示上传预览图片，则必须设置:deletable="true" -->

                        <u-upload

                            :action="actionRequestUrl"

                            :auto-upload="true"

                            name="formFileCollection"

                            :maxCount="10"

                            :form-data="{id: item.id}"

                            :file-list="[{url:itemCoverImage.virtualPath}]"

                            :show-progress="false"

                            :multiple="true"

                            :deletable="true"

                            :show-upload-list="true"

                            >

                        </u-upload>

                    </view>

                </u-td>

                <u-td v-for="(itemPicture, indexPicture) in item.pictureCollection" :key="indexPicture+'CoverImage'">

                    <u-image width="100rpx" height="100rpx" :src="itemPicture.virtualPath"></u-image>

                </u-td>

            </u-tr>

        </u-table>

    </view>

</template>

<script>

    import axios from 'axios';

    export default {

        data() {

            return {

                list: [],

                //文件上传--上传文件所需要调用的指定的后端控制器行为方法。

                actionRequestUrl: 'https://localhost:7144/Product/PostAvatarStream',

                //文件上传--需要或已经被上传的文件。

                filelist: [],

            }

        },

        async onLoad() {

            await this.ProductAll();

        },

        methods: {

            async ProductAll() {

                this.list = await (await axios.get('https://localhost:7144/Product/ProductList')).data;

                console.log(".NeCore--HTTPS: localhost:7144--可用域名示例：", this.list);

            },

        }

    }

</script>

<style lang="scss" scoped>

    .content {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        padding: 40rpx;

    }

    .logo {

        height: 200rpx;

        width: 200rpx;

        margin-top: 100rpx;

        margin-left: auto;

        margin-right: auto;

        margin-bottom: 50rpx;

    }

    .text-area {

        display: flex;

        justify-content: center;

    }

    .title {

        font-size: 28rpx;

        color: $u-content-color;

    }

    .button-demo {

        margin-top: 80rpx;

    }

    .link-demo {

        margin-top: 80rpx;

    }

</style>

对以上功能更为具体实现和注释见：230722_032WebApi(uView多文件上传)

230722_006uView_default(uView多文件上传)