vue中上传文件_vue上传文件前端完整实例

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

input[type=“file”]上传文件原理详解https://blog.csdn.net/weixin_42193004/article/details/96275626

formData:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

结果：

代码：

<div>
                  <span>上传文件：</span>
                  <a class="upload" id="up_btn">
                    <input type="file" @change="uploadFile()" class="change" id="file1" />
                    选择文件
                  </a>

                  <a
                    :href="this.config.hostfile + file1.FilePath"
                    :download="file1.SysFileName"
                    target="_blank"
                    class="file2"
                  >{
  
  {file1.OriginName}}</a>
                </div>


import axios from "axios";
data() {
    return {
      file1: {
        name: "",
        url: "",
        download: "",
      }
      }
      }
methods：{
 uploadFile() {
      let f = document.getElementById("file1");
      if (f.files) {
        let fileList = f.files;
        let formData = new FormData();  //创建空对象
        for (let i = 0; i < fileList.length; i++) {
          //如需判断文件就在这判断 现在不判断
          formData.append("film", fileList[i]);
        }
        axios
          .post(文件上传接口, formData)
          .then((res) => {
            if (res.data.Success) {
              this.file1 = res.data.Result;
            } else {
              this.$message.error(res.Msg || "获取数据失败，无法上传");
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message.error("无法上传");
          });
      }
    }
}

.upload {
  padding: 4px 10px;
  height: 20px;
  background-color: #00b3ee;
  color: #fff;
  position: relative;
}
.change {
  position: absolute;
  top: 0;
  left: 0px;
  overflow: hidden;
  opacity: 0;
  width: 76px;
  height: 24px;
}
.file2{
  padding-left: 10px;
}