vue两种上传文件（图片）方式

最新推荐文章于 2024-04-18 15:00:06 发布

贾克杰森

最新推荐文章于 2024-04-18 15:00:06 发布

阅读量932

点赞数

分类专栏： vue 文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/qq_43850391/article/details/128885590

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

方式一：base64

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件上传</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ddd;
    }

    .upload {
      width: 500px;
      height: 500px;
      padding: 10px;
      background-color: #fff;
      border-radius: 8px;

    }

    .upload span {
      font-size: 20px;
    }

    .u-input {
      position: relative;
      width: 100px;
      height: 40px;
    }

    .input {
      opacity: 0;
      cursor: pointer;
      position: absolute;
      z-index: 99;
      height: 100%;
      width: 100%;
    }

    .btn {
      width: 100px;
      height: 40px;
      background-color: #2985e9;
      border-radius: 8px;
      border: 0;
      color: #fff;
    }

    .btn2 {
      width: 60px;
      height: 30px;
      background-color: #fff;
      border-radius: 8px;
      border: 1px solid #ccc;

    }

    table {
      width: 480px;
      /* height: 400px; */
      border: 1px solid #ccc;
      border-collapse: collapse;
    }

    td,
    tr {
      border: 1px solid #ccc;
    }

    tr {
      height: 40px;
    }

    tr:nth-child(2n) {
      background-color: #ddd;
    }

    .footer {
      float: right;
    }

    .footer button {
      width: 60px;
      height: 40px;
      background-color: #2985e9;
      border-radius: 8px;
      border: 0;
      color: #fff;
    }
  </style>

</head>

<body>
  <div id="root">
    <div class="upload">
      <div><span>上传附件</span></div>
      <div class="u-input">
        <input ref="fileRef" class="input" type="file" @change="handleChange" />
        <button class="btn" @click="submitClick">选择文件</button>
      </div>
      <table>
        <thead>
          <tr style="display: none;"></tr>
          <tr>
            <td>名称</td>
            <td>大小</td>
            <td>操作</td>
          </tr>

        </thead>
        <tbody>
          <tr v-for="(item, index) in fileList" :key="index">
            <td>{{item.fileName}}</td>
            <td>{{item.fileSize}}kb</td>
            <td>
              <button class="btn2" @click="delFile(item)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="footer">
        <button @click="cancel">取消</button>
        <button @click="upload">上传</button>
      </div>

    </div>
  </div>

</body>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      fileList: [],
      base64File: ""
    },
    methods: {
      submitClick () {
        console.log("submitClick")
      },
      handleChange (file, warp) {
        console.log(this.$refs["fileRef"].files[0])
        const uploadFile = this.$refs["fileRef"].files[0]
        const fileSize = uploadFile.size / 1024  //kb
        const fileName = uploadFile.name

        let fileObj = {
          fileName: fileName,
          fileSize: (fileSize).toFixed(1)
        }

        //转base64传输
        this.transferBase64(uploadFile, fileObj)



      },
      transferBase64 (files, obj) {
        // 先判断浏览器是否支持
        if (window.FileReader === 'undefined') {
          alert("您的浏览器不支持图片上传")
          return
        }
        // fileReader读取文件，可以转化为base64
        const reader = new FileReader()
        reader.readAsDataURL(files)  // 转为base64


        /*       
        FileReader.onabort：该事件是中止读取的时候触发。
        FileReader.onerror：该事件是读取发生错误的时候触发。
        FileReader.onload：该事件是读取完成的时候触发。
        FileReader.onloadstart：该事件是读取操作刚开始的时候触发。
        FileReader.onloadend：该事件是读取结束的时候触发（失败和成功的时候都会触发）。
        FileReader.onprogress：该事件在读取的时候触发。 
        */
        reader.onload = () => {
          this.fileList.push(obj)
          console.log(typeof reader.result) //string
          this.base64File = reader.result
          // axios.post("xxxx", {
          //   file: reader.result
          // }).then((res) => {

          // })
        }


      },
      delFile (item) {
        let arr = this.fileList.filter((v) => v.fileName !== item.fileName)
        this.fileList = arr

      },
      cancel () {
        this.fileList = []
      },
      upload () {
        axios.post("xxxxx", {
          file: this.base64File,
          params: this.fileList[0]
        }, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        }).then((res) => {

        })
      }
    },
  })
</script>

</html>

方式二： formData

<script>
  const vm = new Vue({
    el: '#root',
    data: {
      fileList: [],
      base64File: ""
    },
    methods: {
      submitClick () {
        console.log("submitClick")
      },
      handleChange (file, warp) {
        console.log(this.$refs["fileRef"].files[0])
        const uploadFile = this.$refs["fileRef"].files[0]
        const fileSize = uploadFile.size / 1024  //kb
        const fileName = uploadFile.name

        let fileObj = {
          fileName: fileName,
          fileSize: (fileSize).toFixed(1)
        }

        let formdata = new FormData()
        formdata.append('file', uploadFile)
        formdata.append('title', "abaaba")
        formdata.append('url', "d:/xxx")
        console.log(formdata.get("file"))
        /* axios.post('xxx', formdata, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        }) */



      },

      delFile (item) {
        let arr = this.fileList.filter((v) => v.fileName !== item.fileName)
        this.fileList = arr

      },
      cancel () {
        this.fileList = []
      },
      upload () {
        axios.post("xxxxx", {
          file: this.base64File,
          params: this.fileList[0]
        }).then((res) => {

        })
      }
    },
  })
</script>