求一個能用的網(wǎng)址網(wǎng)站搜索排名優(yōu)化價格
總結(jié):平常使用v-for的key都是使用index,這里vue官方文檔也不推薦,這個時候就出問題了,我們需要key為唯一標(biāo)識,這里我使用了時間戳(new Date().getTime()
)處理比較復(fù)雜的情況,
本文章參考 鏈接: https://www.jb51.net/javascript/29041834i.htm
效果圖:
disabled 上傳完一張圖片之后,把上傳‘+’樣式隱藏 詳見:vue element-ui v-for循環(huán)el-upload上傳圖片 動態(tài)添加、刪除
//disabled 上傳完一張圖片之后,把上傳‘+’樣式隱藏 詳見:[vue element-ui v-for循環(huán)el-upload上傳圖片 動態(tài)添加、刪除](https://blog.csdn.net/sumimg/article/details/132620328)
<el-form-item label="資源列表:"><div class="ziyuan" flex v-for="(item, indexes) in addList " :key="item.idxxx"><div style="margin-top: 9px;"><el-upload :action="domins + '/common/upload'":class="{ disabled: item.uploadDisabled }" list-type="picture-card":before-upload="beforeUploadOne" :on-preview="handlePictureCardPreview":on-remove="handleRemove.bind(null, { 'index': indexes, 'data': item })":on-success="handleAvatarSuccess.bind(null, { 'index': indexes, 'data': item })":on-change="handleChange.bind(null, { 'index': indexes, 'data': item })":file-list="item.fileList" accept="image/png, image/jpeg"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="item.dialogImageUrl" alt=""></el-dialog></div><div class="yasuo" flex="cross:center"><div><div style="height: 68px;"><el-upload ref="uploadzip" :action="domins + '/common/upload'":on-remove="handleRemoveZip":on-success="handleAvatarSuccessZip.bind(null, { 'index': indexes, 'data': item })":on-change="handleChangeZip" :file-list="item.fileListZip":auto-upload="true" accept=".zip,.rar,.ab" :limit="1"><el-button size="small" type="primary">選擇壓縮包</el-button></el-upload></div><div class="banben" v-show="addmu == 1 || jzyFlag == 2">版本號{{item.versions ? item.versions : '1.0.0' }}</div></div></div><div class="airadio"><el-radio-group v-model="item.way"><el-radio :label="0">Android</el-radio><el-radio :label="1">ios</el-radio></el-radio-group></div><div style="margin-top: 11px;"><i class="el-icon-circle-plus-outline" style="color: #264E71;"@click="plusOne(indexes)"></i><i class="el-icon-remove-outline" style="color: #264E71;" v-show="addList.length > 1"@click="removeOne(indexes, item.id, item)"></i></div></div></el-form-item>
壓縮文件 imageConversion 詳見: vue+elementUI 上傳圖片時壓縮圖片
<script>
import * as imageConversion from 'image-conversion';
export default {components: { },data() {return {addList: [{id: 0,uploadDisabled: false,album: '',zip: '',way: 0,idxxx: 0// fileList: [],// fileListZip: []}],}}
}
</script>
刪除某一項 idxxx作為唯一標(biāo)識,因為需求原因 在沒添加時間戳(new Date().getTime())之前是沒有唯一標(biāo)識的
//再后面添加一項,idxxx作為唯一標(biāo)識,因為需求原因 在沒添加時間戳之前是沒有唯一標(biāo)識的plusOne() {this.addList.push({id: 0,uploadDisabled: false,album: '',zip: '',way: 0,idxxx: new Date().getTime()})
},
removeOne(index, id, item) {
//使用唯一標(biāo)識刪除this.addList = [...this.addList.filter(e => e.idxxx !== item.idxxx)]
},
下面是其他的上傳文件的方法
// 模板圖片
beforeUploadOne(file) {console.log(file.size, '壓縮前');const isJpgOrPng =file.type === "image/jpeg" || file.type === "image/png";const isLt1M = file.size / 1024 / 1024 < 1;console.log(file.size / 1024 / 1024, 'isLt1M==');if (file.size / 1024 / 1024 > 2 || file.size / 1024 / 1024 == 2) {this.$message.error("上傳圖片不能超過2M");return false;}if (!isJpgOrPng) {this.$message.error("上傳圖片只能是 JPG 或 PNG 格式!");return false;}return new Promise((resolve) => {// 小于1M 不壓縮// if (isLt1M) {// resolve(file)// }// 壓縮到600KB,這里的600就是要壓縮的大小,可自定義imageConversion.compressAccurately(file, 600).then((res) => {console.log(res, '-----res====');resolve(res);});});
},
handlePictureCardPreviewOne(file) {console.log(file, 'file');this.dialogImageUrlOne = file.url;this.dialogVisibleOne = true;
},
handleRemoveOne(file, fileList) {console.log(file, fileList);this.uploadDisabledOne = false;
},
handleAvatarSuccessOne(res, file) {console.log(res, file, 'res, file');this.dialogImageUrlOne = res.data.fullurlconsole.log(this.dialogImageUrlOne, 'this.dialogImageUrlOne圖片路徑');
},
uploadSectionFileOne(file, fileList) {if (fileList.length >= 1) {this.uploadDisabledOne = true;}
},
// zip
handleRemoveZip(file, fileList) {console.log(file, fileList, '移走路徑');
},
handleAvatarSuccessZip(obj, res, file) {console.log(res, file, 'res, file111');console.log(res.data.fullurl, '壓縮包路徑')this.zip_file = res.data.fullurllet imgList = this.addListlet index = obj.index;this.addList[index].zip = res.data.fullurl},
handleChangeZip(file, fileList) {},
css .disabled
.disabled .el-upload--picture-card {display: none !important;
}