vue3上传下载demo

如果这篇文章能给你带来帮助，不胜荣幸，如果有错误，也请批评指正，一起学习共同进步。

　　上传我使用的是<input>框的形式来展示，代码如下：

　　

 <el-form-item label="文档上传">
                <span style="margin-right: 10px;" v-if="!isedit">{{ form.file?.name }}</span>
                <el-link type="primary" :underline="false" @click="handleOpenFile">点击上传</el-link>
                <input type="file" style="display: none;" accept=".xlsx, xls, ppt, word, txt" ref="fileRef" @change="handleFileUpload">
</el-form-item>

　　触发事件：

const handleOpenFile = () => {
    fileRef.value.value = ''
    fileRef.value.click()
}
　　
const handleFileUpload = e => {
    const file = e.target.files[0]
    if (!file) {
        return false
    }
    form.value.file = file
    form.value.name = file.name
}

　　form结构如下：

const form = ref({

　age:“”

　........//其他需要传递到后台的字段都可以写在这里

    file: "", //文件

    name: "", //文件名称

})

点击上传js如下

　　

try {
      await formRef.value.validate()
      const formData = new FormData()
      if(undefined==form.value.file||null==form.value.file){
        ElNotification.error({
          title: '提示',
          message: '请上传文件'
        })
      }else{
        formData.append('file', form.value.file)
        await insert(form.value, formData)
        ElNotification.success({
            title: '提示',
            message: '保存成功'
        })
        emits('success')
      }
    } catch (e) {
        loading.value = false
    }
//请求方法用post,headers设置类型
export function insert(data){
    return axios.post('/recordMagger/insert', data,{
        headers: {
            'content-type': 'multipart/form-data'
        }
    })
}

　　后台代码：

public ResultBean<Integer> insertRecordMagger(RecordmEntity entity, @RequestParam("file") MultipartFile file)

　　至此你已经全部拿到文件了，至于你是采用什么方法去上传，根据具体的业务来决定，例如minio,七牛云，还是上传到服务器本地...等等得自己决定

　　前端下载：一行代码搞定。

export function downloadReport(url, fileName) {
  if (!url) {
    return
  }
  const link = document.createElement('a')
  link.target = '_blank'
  link.href = url
  if (fileName) {
    link.download = fileName
  }
  link.click()
}

　　前端预览

　　

<el-link type="primary" :underline="false" @click="prehandle(row)" style="margin-left: 10px;">预览</el-link>

　　<el-dialog title="文档预览"  v-model="dialogPreviewVisible" width="80%">
        <div style="width: 100%; height: 650px">
            <iframe :src="previewUrl" width="100%" height="100%"></iframe>
        </div>
    </el-dialog>

js方法：
  const prehandle = (row) => {
    dialogPreviewVisible.value = true;
    previewUrl.value = row.filepath
  }

　　作为一个后端，下次直接打开粘贴就可以了，不用再四处搜了。