腳本之家服務器常用軟件

快捷導航

vant的Uploader?文件上傳,圖片數據回顯問題

更新時間：2022年10月20日 11:20:39 作者：飛魚愛吃米

這篇文章主要介紹了vant的Uploader?文件上傳,圖片數據回顯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vant的Uploader文件上傳,圖片數據回顯

需求

描述一下：點擊上傳證件照，選取需要的圖片文件，然后圖片在證件照欄展示

分析

看著挺簡單的，用的是vant，里面有個文件上傳的組件Uploader，它里面的文件預覽模式是這樣的

啊這。。。

指定不行，還好它還有自定義上傳樣式的，像這樣

問題又來了：選取文件后沒反應了?。?！

其實也不是，沒有反應就是沒有對文件數據進行處理展示。

看一下Uploader的API：

參數file可以獲取到一個文件對象

可以拿到文件名、文件類型、還有圖片的base64格式的圖片數據，那么我們只需要定義一個字段來接受這個圖片數據，并綁定給展示證件照的圖片框上就能實現(xiàn)圖片回顯了！

使用

結構部分

      <van-field name="photo" label="證件照" colon class="tx">
        <template #input>
          <van-image :src="staffPhoto ?staffPhoto : require('@/assets/icon/tx.png')" />
        </template>
      </van-field>
      <van-uploader :before-read="beforeRead" :after-read="afterRead">
        <van-button icon="add-o">上傳證件照</van-button>
      </van-uploader>

方法部分

    const afterRead = (file) => {
      state.staffPhoto = file.content;
    };

Uploader里面呢還有一個API：before-read

我們一般在這個里面對圖片的格式進行控制

舉個栗子：

    // 返回布爾值
    const beforeRead = (file) => {
      if (file.type !== "image/jpeg") {
        Toast("請上傳 jpg 格式圖片");
        return false;
      }
      return true;
    };

當然，我們也可以對圖片的大小進行控制

自帶的事件oversize

	const onOversize = () => {
      Toast("文件大小不能超過 500kb");
    };

結構部分就是：

<van-uploader multiple :max-size="onOverSize" />

基本使用Uploader用到的功能就這些了，如果有其他的需求可以訪問文檔：

Uploader的基本使用

使用有贊Vant上傳控件Uploader感悟

因為項目是公眾號網頁項目，公司前端推薦使用有贊Vant組件庫，這讓之前都是自己擼js，css的我仿佛打開了新世界的大門，廢話不多說，上正文。

照著官方文檔，我很快上手擼出了界面。

<van-uploader v-model="fileList" multiple :max-count="4"/>

因為需求說明最多只能上傳4張圖片，故使用了max-count來定義最大上傳數量。

數據處理

我上傳了一張照片，我們來看看fileList的數據是什么格式。

可以看到結果是一個數組array，每張圖片都轉為一個對象，對象下有兩個鍵值分別是：content->圖片base64編碼（有贊這個Uploader很貼心的幫我們把圖片轉成base64格式流），file->一個文件對象，包含了文件名，上傳路徑，文件類型，文件大小等。

看完了數據，后端需要我們把文件傳給他們，這里有一點需要注意，base64編碼由于長度原因，請求方式必須用POST。

let photos = []
that.fileList.forEach(v=> {
    let o = {
        base64Str: v.content,
        filename: v.file.name
    }
    photos.push(o)
})

通過axios請求后臺

axios.request({
    url: '/x/xxx/api',
    data: {
        photos: photos 
    },
    method: 'POST'
})

后臺處理

@RequestMapping(value = "/api", method = RequestMethod.POST)
public JSONObject xxx(@RequestBody JSONObject jsonObject) {
	JSONArray photos = jsonObject.getJSONArray("photos");
	if (photos.size() > 0) {
        for (int i = 0; i < photos.size(); i++) {
            JSONObject obj = photos.getJSONObject(i);
            String fileName = obj.getString("filename");
            String base64Str = obj.getString("base64Str");
            String directoryName = "xx/xx";
            String extension = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
            InputStream inputStream = new ByteArrayInputStream(Base64.decodeBase64(base64Str.substring(base64Str.indexOf(",") + 1)));
            OSSClient client = new OSSClient(endpoint, accessKeyId, accessKeySecret);
            client.putObject(bucketName, getRandomKey(directoryName, extension), inputStream);	// extension指的是拓展名，例如".amr"
        }
    }
}
 
/**
 * 隨機生成一個key
 * @return String 隨機key
 */
public static String getRandomKey(String directoryName, String extension){
    StringBuffer key = new StringBuffer();
	if (StringUtils.isNotBlank(directoryName)) {
	    key.append(directoryName);
		if (directoryName.charAt(directoryName.length() - 1) != '/') {
			key.append("/");
		}
	}
	key.append(System.currentTimeMillis());
	for (int i = 0; i < 10; i++) {
		key.append(randomStr.charAt(RandomUtils.nextInt(0, randomStr.length())));
	}
	if (StringUtils.isNotBlank(extension)) {
		if (extension.indexOf(".") == -1) {
			key.append(".");
		}
		key.append(extension);
	}
	return key.toString();
}

后臺處理需要注意下base64編碼，我先把base64Str解碼轉為byte[]數組，因為項目使用阿里的OSSClient，上傳過程還是比較簡單。

整個流程做完了，感覺組件大大縮減了開發(fā)和調試時間。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: