el-upload + .net Core api 实现上传图片

本文主要是介绍el-upload + .net Core api 实现上传图片，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.前端：

<template>

    <div class="app-container">

        <el-upload

          ref="upload"

          accept='image/jpeg,image/gif,image/png'

          :data="upload.paramData"   /**  上传时附带的额外参数*/ 

          :auto-upload="true"

          :headers="upload.headers"  

          :action="upload.url"

          :limit="upload.limit"  

          :multiple="upload.multiple" 

          list-type="picture-card"  

          :on-preview="handlePreview"  

          :on-remove="handleOutlineRemove" 

          :on-success="handleOutlineSuccess" 

          :file-list="upload.outlineFileList"> 

          <i class="el-icon-plus"></i>

        </el-upload>

  

        <!-- 图片预览对话框 -->

        <el-dialog title="图片预览" width="58%" :visible.sync="dialogVisible">

          <img width="100%" :src="dialogImageUrl" alt="">

        </el-dialog>

    </div>

</template>

 

<script>

import uploader from '@/components/ImageUpload'

export default {

  components: { uploader},

  data() {

    return {

      //图片预览对话框是否显示

      dialogVisible: false,

      //图片预览地址

      dialogImageUrl: "",

      upload:{

        // 设置上传的请求头部

        headers: { Authorization: "Bearer " },

        // 上传的地址

        url: process.env.VUE_APP_BASE_API + "/Common/UploadImg/MultipleFileUpload",

        //上传图片个数限制

        limit: 5,

        multiple: true,

        paramData:{

          type:'WTS',

          id:'123'

        },

        outlineFileList: [

          {

            name: 'food.jpeg', 

            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'

          }, 

          {

            name: 'food2.jpeg', 

            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'

          }

          ]

      }

    }

  },

  mounted() {

 

  },

  methods: {

     //上传图片-图片预览

    handlePreview (file) {

      this.dialogImageUrl = file.url;

      this.dialogVisible = true;

    },

    handleOutlineSuccess(response, file, fileList) {

      debugger

      this.upload.outlineFileList=fileList;//将最新的图片数组（系统插件控制的）赋值给提交时绑定的变量，方便数据跟进和提交

    },

    //概要图片移除事件

    handleOutlineRemove(file, fileList) {

      this.upload.outlineFileList=fileList; //将最新的图片数组（系统插件控制的）赋值给提交时绑定的变量，方便数据跟进和提交

      this.$message({

        type: 'info',

        message: '已删除原有图片',

        duration: 1000

      });

    },

  }

}

</script>

2.webapi:

/// <summary>
        ///  上传多个文件
        /// </summary>
        /// <param name="Files"></param>
        /// <returns></returns>
        [HttpPost]
        [AllowAnonymous]
        public JsonResult<object> MultipleFileUpload(IFormCollection Files)
        {

            try
            {
               
                string dd = Files["File"];
                var form = Files;//定义接收类型的参数
                Hashtable hash = new Hashtable();
                IFormFileCollection cols = Request.Form.Files;
                if (cols == null || cols.Count == 0)
                {
                    return Result<object>(false, "没有上传文件");

                }
                foreach (IFormFile file in cols)
                {
                    //定义图片数组后缀格式
                    string[] LimitPictureType = { ".JPG", ".JPEG", ".GIF", ".PNG", ".BMP" };
                    //获取图片后缀是否存在数组中
                    string currentPictureExtension = Path.GetExtension(file.FileName).ToUpper();
                    if (LimitPictureType.Contains(currentPictureExtension))
                    {

                        //为了查看图片就不在重新生成文件名称了
                        // var new_path = DateTime.Now.ToString("yyyyMMdd")+ file.FileName;
                        var new_path = Path.Combine("uploads/images/", file.FileName);
                        var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", new_path);

                        using (var stream = new FileStream(path, FileMode.Create))
                        {

                            图片保存

                           ....................(略)
                         
                        }
                    }
                    else
                    {
                        return Result<object>(false, "请上传指定格式的图片");

                    }
                }
                return Result<object>(false, "上传成功");
            }
            catch (Exception ex)
            {
                return Result<object>(false,"上传失败"+ ex.ToString());
                
            }
        }

引用  IFormCollection 类 获取  Asp.Net.Core 中 Http 请求的一个类，就可以直接获取form表单中的参数

参考链接：

.net core webapi 上传图片_刘建峰的博客-CSDN博客

Upload 上传 (组件) - Element UI 中文开发手册 - 开发者手册 - 云+社区 - 腾讯云 (tencent.com)

这篇关于el-upload + .net Core api 实现上传图片的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！