快捷導(dǎo)航

使用vant-uploader上傳照片無(wú)法刪除的解決

更新時(shí)間：2022年10月20日 11:26:43 作者：Pomprogram

這篇文章主要介紹了使用vant-uploader上傳照片無(wú)法刪除的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vant-uploader上傳照片無(wú)法刪除

在微信小程序使用vant-uploader上傳圖片時(shí)，發(fā)現(xiàn)點(diǎn)擊右上角的小叉叉無(wú)法刪除圖片，查看了源碼：

（源碼位置：miniprogram\miniprogram_npm@vant\weapp\uploader\index.js）

    deleteItem: function (event) {
      var index = event.currentTarget.dataset.index;
      this.$emit(
        'delete',
        __assign(__assign({}, this.getDetail(index)), {
          file: this.data.fileList[index],
        })
      );
    },

發(fā)現(xiàn)里面點(diǎn)擊刪除只是向父組件傳遞了一個(gè)名為’delete’的事件，該事件包含點(diǎn)擊的圖片的下標(biāo)。為了達(dá)到刪除的目的，我們還需自己定義對(duì)應(yīng)的刪除函數(shù)。

解決方法

在XML里獲取delete事件，其中’deleteImg’為自定義的刪除照片的操作：

    <van-uploader catch:delete="deleteImg" preview->      
    </van-uploader>

在JS里，寫自己需要進(jìn)行的操作：

  deleteImg(event){
    let index= event.detail.index
    console.log(index)//輸出的就是圖片所在fileList的下標(biāo)，自己根據(jù)需要進(jìn)行操作就行
  },

一些關(guān)于vant-uploader的前端問題

首先要引入vant和vue，參考官方地址。vant-uploader的定義，實(shí)現(xiàn)和引入詳見官方地址，這里不再一一列舉。

本文寫一些前端開發(fā)方面遇到的問題。

1.afterRead和beforeRead有時(shí)不能同時(shí)執(zhí)行的問題。

解決方案：beforeRead要執(zhí)行返回True之后才可以執(zhí)行afterRead 。

<van-uploader :before-read="beforeRead" ：after-read="afterRead" />
export default {
? methods: {
? ? beforeRead(file) {
? ? ? if (file.type !== 'image/jpeg') {
? ? ? ? Toast('請(qǐng)上傳 jpg 格式圖片');
? ? ? ? return false;
? ? ? ? ?? ??? ??? ?}
? ? ? return true;
? ? ? ?? ??? ?},
? ?afterRead(file) {
? ? ? // 此時(shí)可以自行將文件上傳至服務(wù)器
? ? ? console.log(file);
? ? ? ?? ??? ?},
? ? ? ?? ?},
};

van-uploader允許上傳的文件類型默認(rèn)為image/*，一般直接寫afterRead就可以了。

2.實(shí)現(xiàn)實(shí)時(shí)向服務(wù)器提交，刪除文件。

項(xiàng)目需求是上傳和刪除與服務(wù)器同步，刪除圖片的同時(shí)需要從服務(wù)器端也刪除圖片。

由于vant-uploader本質(zhì)也是image+input實(shí)現(xiàn)的。

原有的方法是給input直接綁定id，用ajaxFileUploader方法實(shí)時(shí)更新后臺(tái)的圖片文件，缺點(diǎn)是一次性只能選擇一張圖片。

于是我們可以動(dòng)態(tài)給vant-uploader控件里的input框動(dòng)態(tài)添加id,以此實(shí)現(xiàn)delete時(shí)候后端也可以即時(shí)刪除圖片的操作。

function delImg(index){
let ind = vue.$data.imgContList.indexOF(index);
vue.$data.imgContList.splice(ind,1);
console.log(vue.$data.imgContList);
let delUploader =document/getElementByClassName("van-uploader__preview-delete");
for(let i=0;i<vue.$data.imgContList.length;i++){
$(delUploader[i]).removeAttr("id").attr("id","removeClose_4_"+(vue.$data.imgCountList[i]));
$(delUploader[i]).removeAttr("onclick").attr("onclick","delImg("+(vue.$data.imgCountList[i])+")");
}
}

3.一些樣式的修改具體參考官網(wǎng)api或者直接修改vant.css里關(guān)于uploader的css樣式即可。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: