preface
This paper mainly records the realization of attachment uploading function in Vue project, which can realize single/multiple attachment uploading, identify file format and display with different ICONS, and control whether it can be edited. The content is concise and easy to understand, and you can help yourself if necessary. The full code click here
The core code
<div class="upload-flie-btn">
<div class="btn-tips" @click="openFileSelect" v-show="editFlag">To upload attachments</div>
<input
style="display: none"
type="file"
ref="fileInput"
multiple="multiple"
@change="uploadFile"
/>
</div>
Copy the code openFileSelect() {
// dispatchEvent Dispatches an event to a specified event target
this.$refs.fileInput.dispatchEvent(new MouseEvent('click'));
}
// Upload multiple attachments
async uploadFile() {
let _this = this;
this.loading = true;
// The number of files uploaded can be limited
// let files = [...this.$refs.fileInput.files].splice(0,limit);
// You can also throw a hint that the number of files exceeded the limit here
let files = [...this.$refs.fileInput.files];
if(! files || ! files.length) {return;
}
// Address of the back-end interface
let url = `url`;
// Request the back-end interface together
Promise.all(
files.slice(0, files.length).map((file) = > {
const data = new FormData();
data.append('file', file);
return request.post(url, data, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
})Ï
).then((res) = > {
_this.loading = false;
_this.$refs.fileInput.value = null;
})
.catch((err) = > {
console.log(err);
});
}
Copy the codeThe file shows some of the code
This part uses THE VUX component library, which deals with the presentation of files in Word, Excel, PPT, PDF, image, TXT format. Other types of files are displayed as “other”, you can also change the vector image by yourself, which can be found in iconfont. The traversal data fields can be modified according to their own data format.
<swipeout v-if="files.length">
<template v-for="(item,index) in files">
<swipeout-item v-bind:key="item.fileUrl" :disabled=! "" editFlag">
<div slot="right-menu">
<swipeout-button @click.native="deleteItem(item.fileUrl, index)" type="warn">delete</swipeout-button>
</div>
<div slot="content" class="demo-content vux-1px-t">
<div class="file-item">
<a :href="item.url" :download="item.fileName" class="file-look">
<! -- word -->
<div
v-if="item.fileName.indexOf('.doc') > 0 || item.fileName.indexOf('.docx') > 0"
class="file-icon"
>
<svg
t="1601351611486"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1737"
width="200"
height="200"
>
<path
d="M1024 298.666667 V85.333333 c0-25.6-17.066667-42.666667-42.666667-42.666666 H298.666667 c 0-25.6-42.666667 85.333333 17.066667 42.666667 42.666666 v213.333334 l384 384-85.333333 - z"
fill="#41A5EE"
p-id="1738"
/>
<path
d="M1024 298.666667 H256v213. 333333 l405. 333333 85.333333 362.666667 85.333333 z"
fill="#2B7CD3"
p-id="1739"
/>
<path d="512 h256v213 M1024. 333333 l384 64, 384-64, z" fill="#185ABD" p-id="1740" />
<path
d="M1024 725.333333 H256v213. 333334 c0 25.6 17.066667 42.666667 42.666667 42.666666 h682.666666 c25.6 0, 42.666667 to 17.066667 42.666667 42.666666 v - 213.333334 - z"
fill="#103F91"
p-id="1741"
/>
<path
d="256 h256v597 M588.8. 333333 h324. 266667 c29. 866667 0, 59.733333 to 29.866667 59.733333 59.733333 V307.2 c0-29.866667-21.333333-51.2-51.2-51.2 - z"
opacity="5"
p-id="1742"
/>
<path
d="M546.133333 810.666667 H51.2 C21.333333 0 0 V264.533333 C0 759.466667 234.666667 789.333333 21.333333 810.666667 213.333333 51.2 213.333333 h499.2c25.60 46.933333 21.333333 46.933333 51.2v499.2c0 25.6-21.3333333-51.2 46.933333333 z"
fill="#185ABD"
p-id="1743"
/>
<path
d="M435.2 682.666667 H371.2 L298.666667 448 226.133333 682.666667 H162.133333 L93.866667 341.333333 h59.733333 l46.933333 238.9333334-230.4 H51.2 L68.266666 230.4L443.733333 341.333333 H"
fill="#FFFFFF"
p-id="1744"
/>
</svg>
</div>
<! -- excel -->
<div
v-else-if="item.fileName.indexOf('.xls') > 0 || item.fileName.indexOf('.xlsx') > 0"
class="file-icon"
>
<svg
t="1602124050240"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1102"
width="200"
height="200"
>
<path
d="M682.666667 H298.666667 c - 25.6-42.666667 0 and 42.666667 17.066667 42.666667 42.666666 v213.333334 l426.666667 213.333333 170.666666 64 170.666667 64 v298. 666667 l - 341.333333-256 - z"
fill="#21A366"
p-id="1103"
/>
<path
d="M256 298.666667 h426.666667 v213.333333 H256z"
fill="#107C41"
p-id="1104"
/>
<path
d="M1024 v213.333334 h - 341.333333-85.333333 V42.666667 h298.666666 c21.333333 0 42.666667 21.333333 42.666667 42.666666 z"
fill="#33C481"
p-id="1105"
/>
<path
d="512 h256v426 M682.666667. 666667 c0 25.6 17.066667 42.666667 42.666667 42.666666 h682.666666 c25.6 0, 42.666667 to 17.066667 42.666667-42.666666 v - 213.333334-341.333333-213.333333 l z"
fill="#185C37"
p-id="1106"
/>
<path
d="256 h256v597 M588.8. 333333 h324. 266667 c29. 866667 0, 59.733333 to 29.866667 59.733333 59.733333 V307.2 c0-29.866667-21.333333-51.2-51.2-51.2 - z"
opacity="5"
p-id="1107"
/>
<path
d="M546.133333 810.666667 H51.2 C21.333333 0 0 V264.533333 C0 759.466667 234.666667 789.333333 21.333333 810.666667 213.333333 51.2 213.333333 h499.2c25.60 46.933333 21.333333 46.933333 51.2v499.2c0 25.6-21.3333333-51.2 46.933333333 z"
fill="#107C41"
p-id="1108"
/>
<path
d="M145.066667 L256 512 682.666667 153.6 341.333333 h81.066667 l55.466666 c8.533333 12.8 8.533333 21.333333 12.8 106.666667 25.6 l12.8 25.6 L375.466667 h76.8 341.333333 l - 102.4 170.666667 106.666666 170.666667 h - 85.333333 - l - 64-119.466667 c0-4.266667-4.266667-8.533333-8.533333-17.066667 0, 4.266667 to 4.266667 8.533333 8.533334 17.066667 682.666667 H145.066667 L226.133333 z"
fill="#FFFFFF"
p-id="1109"
/>
<path
d="M682.666667 512 h341. 333333 v213. 333333 h - 341.333333 - z"
fill="#107C41"
p-id="1110"
/>
</svg>
</div>
<! -- ppt -->
<div
v-else-if="item.fileName.indexOf('.ppt') > 0 || item.fileName.indexOf('.pptx') > 0"
class="file-icon"
>
<svg
t="1602124175604"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1258"
width="200"
height="200"
>
<path
d="M968.704 135.168 h - 430.08 v752.64 h430.08 c15.36 0, 26.624 to 12.288 26.624 26.624 V162.816 c0-15.36-11.264-27.648-26.624-27.648 - z"
fill="#FF8A65"
p-id="1259"
/>
<path
d="M512 646.144 h376.832 v53.248 H512z m0 107.52 h376.832 v54.272 H512z m161.792-483.328 - c - 89.088-0-161.792-72.704-161.792 161.792C512 521.216 584.704 593.92 673.792 593.92s161.792-72.704 161.792-161.792H673.792V270.336z"
fill="#FBE9E7"
p-id="1260"
/>
<path
d="M727.04 216.064 v161.792 h161.792 c0-89.088-72.704-161.792-161.792-161.792 - z"
fill="#FBE9E7"
p-id="1261"
/>
<path
d="M592.896 L28.672 996.352 888.832 V135.168 L592.896 27.648 z"
fill="#E64A19"
p-id="1262"
/>
<path
d="M319.488 327.68 H192.512 v368.64 h78.848 V569.344 h40.96 c44.032 0 78.848 11.264 104.448 34.816 25.6 22.528 38.912 53.248 38.912 90.112 366.592 409.6 327.68 319.488 327.68 C455.68 z m - 14.336-178.176 h - 33.792 V391.168 h33.792 c43.008 0 64.512 18.432 64.562 56.32 0 39.966-21.564 58.368-64.562 58.368z"
fill="#FFFFFF"
p-id="1263"
/>
</svg>
</div>
<! -- pdf -->
<div v-else-if="item.fileName.indexOf('.pdf') > 0" class="file-icon">
<svg
t="1602124241991"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1536"
width="200"
height="200"
>
<path
d="M877.874285 a48.742278 0 0 1-48.793478 48.793478 48.742278 926.464244 H146.432914 a48.742278 48.742278 0 0 1-48.793478-48.793478 V48.744838 A48.742278 0 0 1 146.432914 0.00256 48.742278 h418.814953 A48.742278 48.742278 0 0 1 34.662313 14.131165l263.781741 263.83294c9.164777 9.215977 14.233564 21.657546 14.182364 34.611114v613.886465z"
fill="#EBECF0"
p-id="1537"
/>
<path
d="M877.874285 926.464244 v48.793478 a48.742278 48.742278 0 0 1-48.793478-48.742278 H146.432914 a48.742278 48.742278 0 0 1-48.793478-48.742278 v - 48.793478-48.742278 0 0 0 48.793478 48.793478 h682.647893 a48.742278 a48.742278 48.742278 0 0 0 48.793478-48.793478 - z"
fill="#C1C7D0"
p-id="1538"
/>
<path
d="M0.15488 536.372419 H975.358842 v243.813791 a48.742278 48.742278 0 0 1-48.742279-48.742278 H48.897158 a48.742278 48.742278 0 0 1-48.742278-48.742278 v - 243.813791 - z"
fill="#FF5630"
p-id="1539"
/>
<path
d="M97.639436 536.372419 V438.836663 L0.15488 h97.484556 z m780.234849 536.372419 0 l0. 972798-97.535756-97.023757 97.535756 h - 97.996555 - z"
fill="#DE350B"
p-id="1540"
/>
<path
d="M243.96867 585.165897 h84.838188 c15.513561 0.767998 30.668723 4.863988 41.932695 15.564761 10.803173 10.854373 16.639958 25.702336 16.07676 40.959898 0.511999 15.308762-5.324787 30.105525-16.07676 40.959897-11.673571 11.059172-27.340732 16.895958 43.417491 16.12796 v76.543809 h h - 48.742278-34.611114 v - 190.156325 - z m32.665518 81.919795 h43.878291 a42.444694 42.444694 0 0 25.855935-6.348784 23.91034 23.91034 0 0 7.782381 19.96795 c0-16.639958-10.905573-24.883138-32.665519-24.883138 h - 44.851088 v51.199872 z M134.092465 79.001402 h77.004608 c22.374344 0.972798 43.92949 8.396779 58.521453 25.343936 15.462361 19.302352 23.244742 43.571091 21.964745 68.24943 1.023997 24.934338-6.297584 49.510276-20.991947 69.734225a71.679821 71.679821 0 0 1-59.494251-28.774329 H410.726653 158.924402 v - 192.10192 - z m32.665519 h44.339089 a43.417491 43.417491 0 0 0 36.095909-17.049557c9.420776-13.875165 13.823965-30.566324 12.697569-47.308682a70.707023 70.707023 0 0 0-13.670366-48.742278 48.742278 0 0-37.529506-16.588758h-41.983895v129.689275z M288.152879 128.204479 h - 100.914948 v45.311887 h100.914948 v31.231922 v81.919795 h h - 100.914948-32.665518 v - 190.156325 h133.63166 6 v31. 692721 z"
fill="#FFFFFF"
p-id="1541"
/>
<path
d="M877.874285 v6.809583 312.577779 h - 263.83294 a48.742278 48.742278 0 0 1-48.742278-48.742279 V0.00256 a48.742278 48.742278 0 0 1 34.611113 14.131165l264.293739 263.83294c8.959978 9.215977 13.823965 21.708746 13.670366 34.611114z"
fill="#C1C7D0"
p-id="1542"
/>
</svg>
</div>
<! -- image -->
<div
v-else-if="item.fileName.indexOf('.jpg') > 0 || item.fileName.indexOf('.jpeg') > 0 || item.fileName.indexOf('.png') > 0"
class="file-icon"
>
<svg
t="1602124262555"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1680"
width="200"
height="200"
>
<path
d="M901.565663 a48.617739 0 0 1-48.61774 48.662261 48.617739 926.72 H170.429663 a48.617739 48.617739 0 0 1-48.61774-48.662261 V48.662261 A48.617739 48.617739 170.429663 0 h418. 0 0 1 860521 a49. 49.641739 0 0 1, 34.816 641739 14.336l263.479653 263.702261a48.973913 48.973913 0 0 1 14.336 34.816l-0.534261 613.910261z"
fill="#EBECF0"
p-id="1681"
/>
<path
d="M901.565663 926.72 v48.617739 a48.617739 48.617739 0 0 1-48.61774-48.617739 H170.429663 a48.617739 48.617739 0 0 1-48.61774-48.617739 v - 48.617739-48.617739 0 0 0 48.61774 48.617739 h682.51826 a48.617739 a48.617739 48.617739 0 0 0 48.61774-48.617739 - z"
fill="#C1C7D0"
p-id="1682"
/>
<path
d="M24.042184 536.576 h975.382261 v243.712 a48.617739 48.617739 0 0 1-48.662261-48.662261 H72.659923 a48.617739 48.617739 0 0 1 24.042184 780.288 v - 243.712 - z"
fill="#3EB7FC"
p-id="1683"
/>
<path
d="M121.856445 536.576 V439.296 L24.576445 536.576 z m779.798261 0 l1. 024-97.28 97.28 97.28 z"
fill="#2F9CCC"
p-id="1684"
/>
<path
d="M905.216445 312.32v6.633739 H-264.192 a48.617739 48.617739 0 0 1-48.662261-48.617739 v0a49.641739 0 0 1 34.816 14.336l263.479653 263.702261a48.484174 48.484174 0 0 1 14.336 34.3264261 z"
fill="#C1C7D0"
p-id="1685"
/>
<path
d="M354.259923 700.905739a87.930435 87.930435 00 1-17.808695 58.857739 62.775652 62.775652 00 1-50.710261 20.48 67.450435 67.450435 0 0 1-27.113739-5.12V-38.912 a38.466783 38.466783 0 0 24.576 8.192c19.990261 0 29.696-14.870261 29.696-45.056 v - 116.201739 h41.494261 z"
fill="#FFFFFF"
p-id="1686"
/>
<path
d="M438.806706 709.097739v67.584h-41.494261 V-193.536 h66.56q72.214261 0 72.214261 61.44a57.388522 57.388522 0 0 1-22.038261 1-54.761739 17.408 47.638261 80.940522 80.940522 0 0 h - 93.495652-20.48 - z m0 v62.330435 h17.808696 c24.041739 0 36.329739 10.774261 36.329739 31.744 s - 11.798261-30.72-35.84-30.72 - z"
fill="#FFFFFF"
p-id="1687"
/>
<path
d="M723.968445 763.859478a138.729739 138.729739 00 1-69.632 16.384 100.886261 100.886261 00 1-73.238261-26.089739 94.208 94.208 0 0 1-26.713043-71.234782 98.704696 98.704696 0 0 1 29.206261-74.21774 106.852174 106.852174 0 0 1 77.289739 28.672 158.764522 158.764522 54.272 8.904348 0 0 1 v38.912 a107.163826 107.163826 0 0 0-54.761739-13.356522 60.549565 60.549565 0 0-45.545739 18.432 66.248348 66.248348 0 0-17.408 48.128 66.782609 66.782609 0 0 15.89426 47.59374 55.162435 55.162435 00 43.008 16.91826 58.813217 58.813217 00 26.713044 5.12 v - 38.912 v - 33.302261-40.158608 h h80.361739 v96.790261 z"
fill="#FFFFFF"
p-id="1688"
/>
</svg>
</div>
<! -- txt -->
<div v-else-if="item.fileName.indexOf('.txt') > 0" class="file-icon">
<svg
t="1602124341675"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="4641"
width="200"
height="200"
>
<path
d="M901.632 926.72c0 27.136-22.016 48.64-48.64 H170.496c-27.136 0-48.64-22.016-48.64-48.64 v48.64c121.856 22.016 143.36 0 170.496 0h418.816c12.8 0 25.6 5.12 34.816 14.336l263.68 263.68c9.216 9.216 14.336 21.504 14.336 34.816l-0.512 613.888 z"
fill="#EBECF0"
p-id="4642"
/>
<path
d="M901.632 926.72v48.64c0 27.136-22.016 48.64-48.64 H170.496 C-27.136 0-48.64-22.016-48.64-48.64 v926.72-c0 27.136 H682.496 c27.136 0 48.64-22.016 48.64-48.64z"
fill="#C1C7D0"
p-id="4643"
/>
<path
d="M24.064 536.576h975.36v243.712c0 27.136-22.016 H72.704 c-27.136-0-22.016-48.64-48.64 v-243.712z"
fill="#0A84E8"
p-id="4644"
/>
<path
d="M121.856 536.576 V-97.28 l-97.28 97.28h97.28z m779.776 0L1.024-97.28 97.28 97.28h-98.304z"
fill="# 005584"
p-id="4645"
/>
<path
d="M901.632 312.32v6.656h-263.68c-27.136 0-48.64-22.016-48.64-48.64 v0c12.80 25.6 5.12 34.816 14.336l264.192 263.68c8.704 9.216 13.824 21.504 13.312 34.393 z"
fill="#C1C7D0"
p-id="4646"
/>
<path
d="M389.12 589.312 v27.648 H324.608 v169.984 H227.328 H291.84 v - 169.984 v - 27.648 - H389.12 zM466.432 l46.592 69.632 589.312 66.56 95.232 71.168 101.888 46.592 69.632 h39.424 l - h - 39.424 l - 50.688-76.288-50.688 76.288 l70.656 h - 39.424-101.888-66.048-95.232 h38.4 zM798.208 589.312 v27.648 h - 64.512 v169.984 H701.44 v - 64.512 v - 27.648-169.984 h h161.28 z"
fill="#FFFFFF"
p-id="4647"
/>
</svg>
</div>
<! -- other -->
<div v-else class="file-icon">
<svg
t="1602124370240"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="6067"
width="200"
height="200"
>
<path
d="M688.6 2H120. 8C-17.10 0-27.9 12.9-27.9 35.7V1001c0 6.2 14 19.6 27.9 19.6H782.4 C17.10 0 27.9-12.9 27.9 19.6 V238.3 c0-12.9-3.6-8.7-3.6-19.7 L698.9 c0-6.7-3.6-6.7-10.3-6.7 z m0 0"
fill="#E7EFF8"
p-id="6068"
/>
<path
d="M93 1010.2c0 5.7 4.7 10.3 10.3 10.3 10.3 10.3 10.3 h819.6h93v190.6z"
fill="#9FA0A3"
p-id="6069"
/>
<path
d="M340.8 915.4c0-10.1 3.5-18.5 10.5-25.3 7-6.8 15.8-10.1 26.2-10.1 10.4 0 19.2 3.3 26.5 10 7.2 6.7 10.8 15.1 10.8 25.4 0 10.6 3.6 19.2 10.7 25.8 7.2 6.6 16.1 9.8 26.8 9.8 10.3 0-18.9-3.4-26-10.1 s - 10.5-15.3-10.5-25.5 - z c0 m128.5 0-10.2-3.5-18.7 10.5-25.4 7-6.7 15.8-10 26.2-10 10.4 0 19.2 3.4 26.4 10.1 7.2 6.8 10.7 15.2 10.7 25.3 0 10.6-3.6 19.2-10.7 25.8-7.2 6.6 9.8 26.6 9.8-16-10.3 0-18.9-3.4-26-10.1 s - 10.5-15.3-10.5-25.5 - z m128.1 0 c0-10.4 3.5 18.8 10.5 25.5 s15.8-9.9 26.4-9.9 C10.7 0 19.6 3.4 26.7 10.1 7.1 6.8 10.6 15.2 10.6 25.3 0 10.6-3.6 19.2-10.7 25.8-7.2 6.6-16.1 9.8-27 9.8-10.3 0-18.9-3.5-26-10.4 s - 10.5-15.3-10.5-25.2 - z"
fill="#FFFFFF"
p-id="6070"
/>
<path
d="M533.7 484.6 h - 66.8 v - 23.8 - c0-18 3.3 33.4 9.9 46.2 6.6 12.7 17.6 25.5 33.1 38.3 17.9 14.7 29.8 26.7 35.7 36.1 5.9 9.4 8.9 19.4 8.9 30.2 0-12.5-4.4-22.4-13.2-29.9-8.8-7.4-21.3-11.1-37.7-11.1-31.7 0-61.2 11.8 88.6 35.4 v c30.2-77.9-16.9 62.5-25.3 96.9-25.3 38.6 0 68.7 8.9 90.1 26.6 21.4 17.7 32.1 41.7 32.1 71.9 0 19.4-4.4 37.3-13.2 53.6-8.8 16.4-23.9 33.2-45.3 50.6-18.1 14.3-29.6 25.6-34.5 38.8-5 8.2-7.5 18-7.5 29.5v17.4z m-33.2 36.9c12.8 0 23.8 4.1 32.9 12.4 9.1 8.3 13.7 18.3 13.7 30.1 0 11.5-4.6 21.3-13.7 29.6S513.3 606 500.5 606C-13 0-24-4.2-32.9-12.5-8.9-8.3-13.4-18.2-13.4-29.5 0-11.6 4.5-21.6 13.4-30 9-8.3 20-12.5 32.9-12.5z"
fill="#9FA0A3"
p-id="6071"
/>
</svg>
</div>
<div class="file-name">{{item.fileName}}</div>
</a>
</div>
</div>
</swipeout-item>
</template>
</swipeout>
Copy the code