Vue實(shí)現(xiàn)多文件上傳

一 需求展示

通過vue和element實(shí)現(xiàn)多文件上傳

二、實(shí)現(xiàn)步驟

// 代碼片
         <el-form
            ref="dataForm"
            v-loading="formLoading"
            :model="temp"
            :inline="true"
            size="mini"
            label-position="right"
            label-width="80px"
            style="width: 630px; margin-left: 35px"
        >
              <el-form-item label="附件上傳">
                <el-upload
                    ref="upload"
                    class="upload-files"
                    action=""
                    :headers="header"
                    name="files"
                    multiple
                    :auto-upload="false"
                    :file-list="fileList"
                    :on-change="handleChange"
                    style="display: inline;float:right;"
                >
                    <el-button slot="trigger" size="mini" type="primary">選取文件</el-button>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitUpload">
                保存
            </el-button>
            <el-button style="margin-right: 50px" @click="dialogVisible = false"> 取消</el-button>
        </div>

// data數(shù)據(jù)
data() {
        return {
            header: { Authorization: token },
            uploading: false,
            formLoading: false,
            dialogVisible: false,
            fileList: [],
            temp: {
                id: void 0,
                fileName: '',
                fileType: void 0
            }
        }
    },

// methods方法
 handleChange(file, fileList) {
            console.log(file, fileList)
            this.fileList = fileList
        },
        submitUpload() {
            const formData = new FormData()
            this.fileList.forEach(item => {
                formData.append('files', item.raw)
                console.log(item.raw, item)
            })

            MultipartFile(formData)  //后端上傳接口
                .then(res => {
                    console.log(res)
                    this.$emit('added')
                    this.dialogVisible = false
                })
                .catch(err => {
                    console.log(err)
                })
        },

接口

// 注意注意注意-------后端接口
export function MultipartFile(data) {
    return request({
        url: '/uploadFiles',
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' }, //多文件上傳這一句必須加
        data
    })
}

三、結(jié)果展示

文章來源地址http://www.zghlxwxcb.cn/news/detail-603916.html

到了這里，關(guān)于Vue實(shí)現(xiàn)多個(gè)文件上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！