欧美在线看片a免费观看,日本电影一区二区三区,日韩一区,国产二区,欧美三区

這個(gè)webapi項(xiàng)目是專門作為圖片上傳的業(yè)務(wù)處理，而其中分為兩個(gè)控制器：?jiǎn)螆D片上傳和多圖片上傳。在接下來(lái)的內(nèi)容主要還是針對(duì)單文件上傳，對(duì)于多文件的上傳，我暫且尚未研究成功。

其中pictureoptions類，由于我把關(guān)于圖片上傳相關(guān)的配置項(xiàng)（保存路徑、限制的文件類型和大?。懺诹伺渲梦募?，所以接下來(lái)會(huì)通過(guò)依賴注入的方式，注入到這個(gè)類中

第一步，配置文件的設(shè)置

"PictureOptions": {

"FileTypes": ".gif,.jpg,.jpeg,.png,.bmp,.GIF,.JPG,.JPEG,.PNG,.BMP",

"MaxSize": 10485760,

"ImageBaseUrl": "G:\\dotnet\\imageServer\\evaluate"

}

然后在項(xiàng)目根目錄下新建PictureOptions類

public class PictureOptions

{

    /// <summary>

    /// 允許的文件類型

    /// </summary>

    public string FileTypes { get; set; }

    /// <summary>

    /// 最大文件大小

    /// </summary>

    public int MaxSize { get; set; }

    /// <summary>

    /// 圖片的基地址

    /// </summary>

    public string ImageBaseUrl { get; set; }

}

第二步，依賴注入

services.Configure<PictureOptions>

(Configuration.GetSection("PictureOptions"));

在SingleImageUploadController中構(gòu)造注入

這里要注意，你要把Cors跨域配置好，關(guān)于跨域《.NET Core WebAPI + vue.js + axios 實(shí)現(xiàn)跨域》，可以前往閱讀我的另一篇博文

第三步，構(gòu)建POST api

在element-ui中關(guān)于upload組件的api說(shuō)明文檔，可以發(fā)現(xiàn)一個(gè)非常重要的信息

upload組件他實(shí)際是通過(guò)提交form表單的方式去請(qǐng)求url

所以，后臺(tái)這邊，我們也是要通過(guò)form表單，獲取上傳的文件，具體代碼如下：

/// <summary>

/// 上傳文件

/// </summary>

/// <param name="file">來(lái)自form表單的文件信息</param>

/// <returns></returns>

[HttpPost]

public IActionResult Post([FromForm] IFormFile file)

{

    if (file.Length <= this._pictureOptions.MaxSize)//檢查文件大小

    {

        var suffix = Path.GetExtension(file.FileName);//提取上傳的文件文件后綴

        if (this._pictureOptions.FileTypes.IndexOf(suffix) >= 0)//檢查文件格式

        {

            CombineIdHelper combineId = new CombineIdHelper();//我自己的combine id生成器

            using (FileStream fs = System.IO.File.Create($@"{this._pictureOptions.ImageBaseUrl}\{combineId.CreateId()}{suffix}"))//注意路徑里面最好不要有中文

            {

                file.CopyTo(fs);//將上傳的文件文件流，復(fù)制到fs中

                fs.Flush();//清空文件流

            }

            return StatusCode(200, new { newFileName = $"{combineId.LastId}{suffix}" });//將新文件文件名回傳給前端

        }

        else

            return StatusCode(415, new { msg = "不支持此文件類型" });//類型不正確

    }

    else

        return StatusCode(413, new { msg = $"文件大小不得超過(guò){this._pictureOptions.MaxSize / (1024f * 1024f)}M" });//請(qǐng)求體過(guò)大，文件大小超標(biāo)

}

第四步前端Vue項(xiàng)目

<el-upload

  action="http://192.168.43.73:5008/api/SingleImageUpload"

  list-type="picture-card"

  :on-preview="handlePictureCardPreview"

  :on-remove="handleRemove"

  :on-success="handleUploadSuccess"

  :on-error="handleUploadError"

>

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

</el-upload>

<el-dialog :visible.sync="dialogVisible">

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

</el-dialog>

然后是method

data () {

  return {

    dialogImageUrl: '',

    dialogVisible: false,

    images: []

  }

},

methods: {

  handleRemove (file, fileList) {

    this.images.forEach((element, index, arr) => {

      if (file.name === element.oldFile.name) {

        arr.splice(index, 1)

      }

    })

    console.log(this.images)

  },

  handlePictureCardPreview (file) {

    this.dialogImageUrl = file.url

    this.dialogVisible = true

  },

  handleUploadSuccess (response, file, fileList) {

    console.log(response)

    console.log(file)

    console.log(fileList)

    this.images.push({

      newFileName: response.newFileName, // 服務(wù)器端的新文件名，即后端回調(diào)過(guò)來(lái)的數(shù)據(jù)

      oldFile: {

        name: file.name, // 上傳之前的文件名，客戶端的

        url: file.url // 頁(yè)面顯示上傳的圖片的src屬性綁定用的

      }

    })

  },

  handleUploadError (response, file, fileList) {

    this.$message.error(JSON.parse(response.message).msg)

  }

}