uView单文件上传

1 WebApi.Controllers.CustomerController

using Microsoft.AspNetCore.Mvc;

using Microsoft.Net.Http.Headers;

using WebApi.Data;

using WebApi.Domain.Customers;

using System.IO;

using System;

using System.Net;

namespace WebApi.Controllers

{

    [ApiController]

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

    public class CustomerController : ControllerBase

    {

        private readonly EFCoreContext _eFCoreContext;

        private readonly IHttpContextAccessor _httpContextAccessor;

        private readonly IWebHostEnvironment _webHostEnvironment;

        public CustomerController(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/Avatar/Default.jpg";

            }

            else

            {

                absoluteAvatarUrl = hostHeader + virtualAvatarUrl;

            }

            return absoluteAvatarUrl;

        }

        #region CURD

        [HttpGet]

        public List<Customer> CustomerList()

        {

            var customerList = _eFCoreContext.CustomerDbSet.ToList();

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

            {

                customerList[i].Avatar =  GetAbsoluteAvatarUrl(customerList[i].Avatar);

            }

            return customerList;

        }

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

        /// <param name="formFile">1个指定的上传文件的实例。</param>

        /// <summary>

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

        /// </summary>

        /// <remarks>

        /// 摘要：

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

        /// 说明(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"。

        /// </remarks>

        /// <returns>

        /// 返回：

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

        /// </returns>

        [HttpPost]

        public bool PostAvatarStream([FromForm] long id, IFormFile formFile)

        {

            Customer _customer = _eFCoreContext.CustomerDbSet.FirstOrDefault(entity => entity.Id == id);

            if (_customer != null && formFile != null)

            {

                string _originalAvatarName  = Path.GetFileName(_customer.Avatar);

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

                string _filePath = string.Empty;

                if (!string.IsNullOrEmpty(_customer.Avatar)&&!_originalAvatarName.Equals("Default.jpg"))

                {

                    _filePath=_avatarDirectory + _originalAvatarName;

                    System.IO.File.Delete(_filePath);

                }

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

                _filePath= _avatarDirectory+_filename;

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

                formFile.CopyTo(fileStream);

                _customer.Avatar= "/images/Avatar/" + _filename;

                _eFCoreContext.CustomerDbSet.Update(_customer);

                _eFCoreContext.SaveChanges();

                return true;

            }

            return false;

        }

        #endregion

    }

}

2 pages\Customer\AxiosLocalhostAvatar\AxiosLocalhostAvatar.vue

<template>

    <view class="content">

        <u-button type="success" @click="RolePost()">axios.post路由添加数据</u-button>

        <u-table>

            <u-tr>

                <u-th>编号</u-th>

                <u-th>姓名</u-th>

                <u-th>头像</u-th>

            </u-tr>

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

                <u-td>{{ item.id }}</u-td>

                <u-td>{{ item.name }}</u-td>

               

                <!-- 如果使用“u-avatar ”组件显示上传预览图片，则必须设置:width和height-->

                <u-upload

                        :action="actionRequestUrl"

                        :auto-upload="true"

                        name="formFile"

                        :maxCount="1"

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

                        :show-progress="false"

                        :max-size="10 * 1024 * 1024"

                        :deletable="false"

                        :show-upload-list="true"

                        :custom-btn="true"

                        on-success="onSuccess"

                        width="90"

                        height="90">

                        <u-avatar slot="addBtn" :src="item.avatar" mode="square"></u-avatar>

                    </u-upload>

               

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

                <!-- <u-upload

                    :action="actionRequestUrl"

                    :auto-upload="true"

                    name="formFile"

                    :maxCount="1"

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

                    :file-list="[{url:item.avatar}]"

                    :show-progress="false"

                    :max-size="10 * 1024 * 1024"

                    :deletable="true"

                    :show-upload-list="true"

                    >

                </u-upload> -->

               

            </u-tr>

        </u-table>

    </view>

</template>

<script>

    import axios from 'axios';

    export default {

        data() {

            return {

                list: [],

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

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

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

                filelist:[],

            }

        },

        async onLoad() {

            await this.CustomerAll();

        },

        methods: {

            async CustomerAll() {

                this.list = await (await axios.get('https://localhost:7144/Customer/CustomerList')).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>

对以上功能更为具体实现和注释见：230709_031WebApi( uView单文件上传)

230709_005uView_default( uView单文件上传)