vue實現(xiàn)文件上傳

更新時間：2022年04月10日 16:06:49 作者：言只?石皮

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)文件上傳的具體代碼，供大家參考，具體內(nèi)容如下

記錄問題，方便回顧

1、使用elementUI的 el-upload插件進(jìn)行上傳。 2、使用input。

1、使用elementUI的 el-upload插件進(jìn)行上傳。

html:

<el-upload
? ? ref="avatar-uploader"
? ? class="avatar-uploader"
? ? :show-file-list="false"
? ? :auto-upload="false"
? ? action
? ? :on-change="handleChange"
?  >
? ?<img v-if="AddSubmenuData.imageUrl" :src="AddSubmenuData.imageUrl" class="avatar">
? ?<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

js:

data() {
? ? ? return {
? ? ? ? AddSubmenuData:{
? ? ? ? ? id:"",
? ? ? ? ? pid:"",
? ? ? ? ? funType:1,
? ? ? ? ? name:"",
? ? ? ? ? sort:"",
? ? ? ? ? SystemCoding:"",
? ? ? ? ? remarks:"",
? ? ? ? ? imageUrl: ''
? ? ? ? },
? ? ? };
? },
? methods: {
? ?? ?// 獲取圖片信息并轉(zhuǎn)成base64
? ? ? handleChange(file, fileList){
? ? ? ?let reader = new FileReader();
? ? ? ? let fileResult = "";
? ? ? ? reader.readAsDataURL(file.raw);
? ? ? ? reader.onload = function() {
? ? ? ? ? fileResult = reader.result;
? ? ? ? };
? ? ? ? reader.onloadend = function() {
? ? ? ? ? ?this.AddSubmenuData.imageUrl = fileResult
? ? ? ? };
? ? ? }
? }

css:

?/deep/ ?.avatar-uploader .el-upload {
? ? ? border: 1px dashed #d9d9d9;
? ? ? border-radius: 6px;
? ? ? cursor: pointer;
? ? ? position: relative;
? ? ? overflow: hidden;
? ? ? margin-left: 80px;
? ? ? margin-bottom: 22px;
? ? }
? ? .avatar-uploader .el-upload:hover {
? ? ? border-color: #409EFF;
? ? }
? ? .avatar-uploader-icon {
? ? ? font-size: 28px;
? ? ? color: #8c939d;
? ? ? width: 178px;
? ? ? height: 178px;
? ? ? line-height: 178px;
? ? ? text-align: center;

? ? }
? ? .avatar {
? ? ? width: 178px;
? ? ? height: 178px;
? ? ? display: block;
? ? }

效果圖：

2、使用input進(jìn)行上傳。

1)、html

首先input的type屬性要改成file，如果需求是點擊按鈕在上傳文件。可以給input加一個ref=“fileInput”，然后通過點擊按鈕調(diào)用input的事件:@click="$refs.fileInput.click()".

<div class="el-button--primary el-button" @click="$refs.fileInput.click()">
? ?<input type="file" ref="fileInput" accept="*" @change="getFile" style="display: none">
? ?<img src="../../assets/Infrastructure/xz.png" />添加
</div>

2)、js

獲取文件后就可以進(jìn)行數(shù)據(jù)處理并調(diào)用接口。因為有些時候，上傳文件有些是重復(fù)的，再次調(diào)用方法就是失效，所以，可以在每次上傳完之后清除之前上傳的文件，這樣即使文件相同，也可以重復(fù)調(diào)用方法。this.$refs.fileInput.value=’’

// 獲取文件數(shù)據(jù)
? getFile(event) {
//這就是你上傳的文件
? ? ? ?event.target.files[0]
? ? ? ?
? ? ? ?let formFile = new FormData();
? ? ? ? formFile.append("file", event.target.files[0]);
? ? ? ? formFile.append("apply_info_id", this.RndNum(12));
? ? ? ? formFile.append("file_type", '');
? ? ? ? //調(diào)用接口
? ? ? ? file_upload(formFile).then(res => {
? ? ? ? ? this.addInformation.addPoupTableData.data.push({name:res.data.name,id:res.data.id,size:(event.target.files[0].size/1024).toFixed(0) + "kb",path:res.data.path})
? ? ? ? ? //調(diào)用接口后清除文件
? ? ? ? ? this.$refs.fileInput.value=''
? ? ? ? })
?},

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: