解析后端图片文件及上传图片文件

解析图片二进制流：

后端返回数据如下：

前端处理数据代码：

(注：调用后端接口必须加上responseType: 'blob'。当通过 HTTP 请求获取二进制数据例如图片、视频文件或其他大对象存储中的数据时，可以将请求的 responseType 属性设置为 blob。这种方式允许客户端接收并处理原始字节流作为 Blob 对象。)

 getPicFile(row.spotCheckPicture).then((res:any) => {//接口傳參
                fileList.value = []
                let blob = new Blob([res.data]);   // 返回的文件流数据
                let url = window.URL.createObjectURL(blob);  // 将他转化为路径
                objectURL.value = url;//如果需要圖片直接顯示，將objectURL.value直接賦值給img標籤即可
                fileList.value.push({//fileList.value為upload標籤照片墻上傳的model，push圖片信息則能夠顯示圖片
                    name: row.spotCheckPicture,//圖片名稱
                    url: url,//圖片路徑
                });
            })

 

对应的upload标签如上图所示。

图片文件转二进制格式传递后端：

const picSuccess = (response: any) => {//圖片上傳成功的回調函數
    const formData = new FormData() //  創建formData表單對象
    formData.append('file', response.raw!) ////將上傳的圖片對象添加到formData表單對象中
    formData.append('path','picture/')
    getImage(formData).then((res:any) => {
        if (res.status == 200) {
            ElMessage.success('上传成功');
            spotCheckPicture.value = response.name
            picShow.value = false
            // oneUploadPic.value = true
            editorAfterDiv.value = 'editor-after-div-none'
        }else{
            ElMessage.error('上传失败');
        }
    })
    picMsg.value = response
    hideUploadEdit.value = true
}