上傳圖片是一大大大重點，一篇文章沒有圖片就沒有人想看了，一個教學文章如果沒有圖片上傳功能，也沒有意義。

目標：
1.上傳圖片

步驟：
step1.前端程式碼 (完整)

@section Styles {
<style>
    .ck-editor__editable {
        min-height: 500px;
    }
</style>
}

<form asp-controller="Article" asp-action="CreateArticle" method="post">
    <div class="form-group" style="width:700px;margin-right:auto;margin-left:auto;">

        <textarea name="Content" class="form-control" id="editor" rows="50"></textarea>

    </div>
    <button type="submit">Send</button>
</form>

    @section Scripts {

<script src="~/ckeditor7/build/ckeditor.js"></script>
<script>
    // ckEdit 5
    ClassicEditor
        .create(document.querySelector('#editor'), {
            removePlugins: [ 'ImageResize' ,'ImageStyle' ,'ImageToolbar' ],
            ckfinder: {
                uploadUrl: '/Article/Uploads'
            }
        })
        .catch(error => {
            console.error(error);
        });
</script>
}

1.這邊首先 先跟 ckeditor 綁定(所以會用jQuery選取器，選擇editor這個Id)。

querySelector('#editor') 綁定 <textarea name="Content"  id="editor">

2.在js程式碼這邊，加上uploadUrl 後面是圖片上傳的後端的路徑(就是下方程式碼)。

ckfinder: {
                uploadUrl: '/Article/Uploads'
            }

3.之後就是 post 回傳的路徑。

step2.後端程式碼，在Articlecontroller.cs 加上此function
那這邊會看到有 var obj = await _article.UploadImage(upload);
可以先註解掉(不然目前會出錯)，因為這是真正處理、儲存圖片的地方。

public async Task<IActionResult> Uploads(IFormFile upload)
        {
            var obj = await _article.UploadImage(upload);

            return Json(new
            {
                uploaded = obj.Uploaded,
                fileName = obj.FileName,
                url = obj.Url,
                error = new
                {
                    message = obj.Msg
                }
            });
        }

今天只要能確定圖片有上傳到後端就好了，可以下中斷點看看。