js實(shí)現(xiàn)圖片上傳功能,深入理解圖片上傳原理

2023年12月7日發(fā)(作者：總為浮云能蔽日)

-

js實(shí)現(xiàn)圖片上傳功能，深入理解圖片上傳原理

js實(shí)現(xiàn)圖片上傳功能，實(shí)現(xiàn)的效果，先見(jiàn)圖來(lái)壓壓驚

圖片上傳.gif

原理：

結(jié)構(gòu)部分：input標(biāo)簽

之前你可能沒(méi)有注意到，input標(biāo)簽還有這個(gè)作用。

屬性為file

為允許選擇的文件格式（如果是圖片，則選擇彈框里不會(huì)出現(xiàn)其他格式的文件），

ge回調(diào)函數(shù)的參數(shù)是我們所選擇的文件對(duì)象數(shù)據(jù)。

如下：

js部分：ajax請(qǐng)求

通過(guò)實(shí)例化XMLHttpRequest對(duì)象，發(fā)起ajax請(qǐng)求，并監(jiān)聽(tīng)進(jìn)度和readyState值，獲取后端返回值，完成上傳。

注意：

1.該圖片上傳功能，可以將選擇過(guò)程和上傳過(guò)程分離，比如你選擇了一個(gè)圖片，可以預(yù)覽圖

片，可以多次選擇和預(yù)覽，最終再確認(rèn)上傳！

2.可以自行對(duì)代碼進(jìn)行修改，就可以適用于上傳視頻或者其他文件！

JSX:

import logo from './';

import './';

import { message,Modal,Icon,Progress } from 'antd';

import uploadFunction from "./js/uploadFunction";

class App extends Component {

constructor(props){

super(props);

={

file:{},//保存文件對(duì)象內(nèi)容

src:"",//保存圖片的url

progress:0,//上傳進(jìn)度

uploadUrl:"192.168.1.20:13003/fileDetail/upImg/1/3139",//上傳地址

}

}

/*

點(diǎn)擊上傳時(shí)觸發(fā)input的點(diǎn)擊事件

*/

clickUploadBtn(){

();

}

/*

* 選擇要上傳的圖片

* */

handleSelectFile(uploadUrl,e){

const file = [0];

if (!file) {

return;

}

let src;

// 匹配類型為image/開(kāi)頭的字符串

if (==="image/png"||==="image/jpeg") {

src = ObjectURL(file);

}el{

("圖片上傳只支持JPG/PNG格式,請(qǐng)重新上傳！");

return;

}

if (/1024/1024>5) {

("圖片上傳大小不要超過(guò)5MB,請(qǐng)重新上傳！");

return;

}

te({

file:file,

src:src

});

pload(uploadUrl,file);

}

/*

* 開(kāi)始上傳圖片

* */

startUpload(uploadUrl,file){

let this_=this;

/*

* 調(diào)用上傳圖片的封裝方法

* */

ForImage(

uploadUrl,

file,

function (progress,respon) {//回調(diào)函數(shù)處理進(jìn)度和后端返回值

this_.tState({

progress:progress

});

if (respon&& === 200) {

s("上傳成功！");

}el if (respon && !== 200) {

()

}

},

m("access_token"));

}

render() {

return (