ThinkPHP6 上傳圖片代碼demo

本文展示了ThinkPHP6 上傳圖片代碼demo, 代碼親測可用.

 

HTML部分代碼

<tr>
    <th class="font-size-sm" style="width:15%;height:100px;">商品圖片</th>
    <td>
        <div class="custom-file">
            <div id="uploadImage" style="width:100px;height:100px;display: inline;"></div>
            <button id="uploadBtn" class="btn btn-outline-info font-size-sm">選擇圖片</button>
            <input type="file" name="imgFile" id="imgFile" style="display: none;">
        </div>
    </td>
</tr>

 

JS部分代碼

$(document).ready(function(){
    var input = $("#imgFile");
    // 將上傳按鈕綁定到input['file']上
    $("#uploadBtn").click(function(){
        input.trigger("click");
    });
    input.change(function () {
        // 如果value不為空，調用文件加載方法
        if ($(this).val() !== "") {
            doUpload(this);
        }
    });
});
 
// 上傳圖片
var SCOPE = {
    'uploadUrl': '{:url("' + urlPath +'/upload")}',
};
function doUpload() {
    var formData = new FormData($( "#myform" )[0]),
        appendDiv = $("#uploadImage"),
        imageUrl = '',
        imageDiv = '';
    $.ajax({
        url: SCOPE.uploadUrl ,
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
            if(result.status === 1){
                appendDiv.empty();
                imageUrl = '/storage/' + result.data;
                imageDiv = '';
                appendDiv.append(imageDiv);
            }
        },
    });
}

 

ThinkPHP中的上傳方法

/**
 * 圖片上傳(ajax)
 * @return \think\Response|void
 * @throws \Exception
 */
public function upload()
{
    // 獲取表單上傳文件 例如上傳了001.jpg
    $file = request()->file('imgFile');
    try{
        // 驗證
        validate(['imgFile'=>[
            'fileSize' => 410241024,
            'fileExt' => 'jpg,jpeg,png,bmp,gif',
            'fileMime' => 'image/jpeg,image/png,image/gif', //這個一定要加上，很重要我認為！
        ]])->check(['imgFile' => $file]);
 
        // 上傳圖片到本地服務器
        $saveName = \think\facade\Filesystem::disk('public')->putFile( 'merchant', $file, 'data');
        $this->result(1, '圖片上傳成功!', $saveName, 'json');
    } catch (\Exception $e) {
        // 驗證失敗 輸出錯誤信息
        return $this->exceptionHandle($e,
            '圖片上傳失敗!' . $e->getMessage(),
            'json',
            '');
    }
}

 

本文轉載自老劉博客, 轉載請注明出處,謝謝!

http://laoliu.pro/php/15.html
————————————————
版權聲明：本文為CSDN博主「老劉pro」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/a33130317/article/details/106933622