关于vue项目element-ui中附件上传汇总

关于vue项目element-ui中附件上传汇总

这是我第一次写文章，写的不好的地方望谅解，我今天讲的是附件上传的问题，这是我写功能性较强的项目中遇到的问题。
我在写项目时，遇到附件上传，这是我从来没写过的东西，我就查看了element-ui的文档，看了半天没看太明白，我就又在网上查看了各种的资料才有所明白是如何调用的接口，如何携带
的参数，不多说了，直接来个例子：

<el-upload
    class="upload-demo"  drag(是否可以拖拽) 
    style="margin:0px auto; width:330px"
    ref="uploadTwo" (在上传的时候使用)
    :auto-upload="autoUpload"(是否立即上传，一般在需要携带的参数，是在其他接口调用
    成功之后返回的数值是附件需要携带的参数时，才需要使用它，否则附件是直接上传的)
    :action="fileUrl"  (上传附件的接口)
    :show-file-list="false" (上传附件的列表是否显示，值为Boolean)
    list-type="text"
    :data="filrString2"(上传附件携带的参数)
    :before-upload="beforeAvatarUpload"(上传附件之前的事件)
    :on-success="successProgress"(上传附件成功调用的参数)
    :on-change="function(file,fileList){return handleChange(file,fileList,2)}"
    (因为要上传多种附件，但不想有多个命名，因此使用此方法，最后一个传不同的值，可以
    实现同个事件的调用，在调用事件时，只需要判断最后值是什么就可以区别开)
    :on-remove="handleRemove"(移除事件，如果是上传事件的时候立马上传的需要，需要在
    移除事件时，调用移除事件的接口，否则不需要)
    accept=".jpg,.gif,.png,.bit,.jpeg,.pdf,.docx,.doc,.zip,.rar,.xls,.xlsx,
    .ppt,.pptx"(上传文件的类型)
    :file-list="fileTwoList"(上传附件的列表)>
    <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
    <div v-else>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">上传附件</div>
    </div>
    <div class="el-upload__tip fs15" slot="tip">
        <span style="color: red;">*</span>照片
    </div>
</el-upload>

在附件下载的时候，调用接口的使用的是：this.location.href=‘调用接口路径’
以上是我自己总结的附件上传下载的使用，希望对你有所帮助。