前端使用axios上传文件

最新推荐文章于 2024-06-29 02:42:55 发布

qx09

最新推荐文章于 2024-06-29 02:42:55 发布

阅读量2.8k

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_34188180/article/details/130643618

版权

本文介绍了如何在不使用Vue脚手架的情况下，通过引入Vue和Axios库实现文件上传功能。具体步骤包括在HTML中引入库，定义Vue实例，处理上传事件，使用FormData对象，以及处理多文件上传。同时，文章还展示了如何实现图片预览，通过FileReader读取文件Base64编码并动态渲染预览链接。此外，还提到了如何设置图片不变形、超出部分隐藏的CSS样式，并提供了在上传时添加额外参数的方法。

摘要由CSDN通过智能技术生成

不用脚手架，引入vue，上传文件实现代码？
要在不使用脚手架的情况下，引入 Vue 并实现上传文件的功能，可以按照以下步骤进行：

在 HTML 文件中引入 Vue 和 Axios 库：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

在 HTML 文件中定义 Vue 实例，并编写上传文件相关的代码：

<div id="app">
  <input type="file" @change="handleUpload" ref="fileInput">
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    handleUpload() {
      const formData = new FormData();
      const file = this.$refs.fileInput.files[0];
      formData.append('file', file);
      axios.post('/upload', formData)
        .then(response => {
          console.log('上传成功');
        })
        .catch(error => {
          console.error('上传失败：', error);
        });
    }
  }
});
</script>

在上述示例中，我们首先在 HTML 文件中定义了一个包含一个文件上传 input 元素的 Vue 实例，在其中编写了一个 handleUpload 方法用于处理上传文件事件。

当用户选择文件后，我们通过 FormData 对象创建了一个新的表单数据对象，并将选择的文件添加到其中。然后，使用 axios.post 方法向服务器发送一个 POST 请求，请求的 URL 是 /upload，此处需要根据实际情况进行修改。

当上传成功时，.then 方法会被执行，并在控制台打印 ‘上传成功’；当上传失败时，.catch 方法会被执行，并在控制台打印错误信息。

需要注意的是，在以上例子中，我们使用 ref 属性获取了 file input 元素的引用，并通过 this.$refs.fileInput.files[0] 获取了用户选择的文件。

多个不同文件呢？
可以修改 handleUpload 方法，用一个数组来保存用户选择的多个文件，并将每个文件都添加到 FormData 对象中，然后一次性向服务器发送所有文件。以下是一个示例：

<div id="app">
  <input type="file" @change="handleUpload" ref="fileInput" multiple>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    handleUpload() {
      const formData = new FormData();
      const files = this.$refs.fileInput.files;
      for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i]);
      }
      axios.post('/upload', formData)
        .then(response => {
          console.log('上传成功');
        })
        .catch(error => {
          console.error('上传失败：', error);
        });
    }
  }
});
</script>

在上述示例中，我们首先为 file input 元素设置了 multiple 属性，使得用户可以选择多个文件。然后，在 handleUpload 方法中，我们定义了一个空 FormData 对象和一个用于保存文件的空数组。

通过遍历选择的文件列表，并依次将每个文件添加到 FormData 对象中，并指定表单参数名为 ‘files[]’。这里需要注意的是，表单参数名需要以数组形式传递，即多个文件都会被作为同一个参数名的数组元素进行传递。

最后，我们使用 axios.post 方法向服务器发送一个 POST 请求，请求的 URL 是 /upload，并把包含所有文件的 FormData 对象作为参数进行提交。

我还想把其中的图片预览
要预览上传的图片，可以在用户选择文件时，将图片的 Base64 编码存储到 Vue 实例中，并使用 URL.createObjectURL 生成一个预览链接保存在另一个数组中，最后在页面上渲染这些预览链接。以下是一个示例：

<div id="app">
  <input type="file" @change="handleUpload" ref="fileInput" multiple>
  <div v-for="(url, index) in previewUrls" :key="index">
    <img :src="url" width="200">
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      files: [],
      previewUrls: []
    };
  },
  methods: {
    handleUpload() {
      const formData = new FormData();
      const files = this.$refs.fileInput.files;
      for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i]);
        if (/^image\//.test(files[i].type)) {
          const reader = new FileReader();
          reader.readAsDataURL(files[i]);
          reader.onload = () => {
            this.previewUrls.push(reader.result);
          };
        }
      }
      axios.post('/upload', formData)
        .then(response => {
          console.log('上传成功');
        })
        .catch(error => {
          console.error('上传失败：', error);
        });
    }
  }
});
</script>

在上述示例中，我们首先定义了一个名称为 previewUrls 的数组，用于保存所有文件的预览链接。当用户选择文件时，我们遍历每个文件，并把它们添加到 FormData 对象中。如果当前文件是一张图片，我们使用 FileReader 对象读取并解析它的 Base64 编码，并把解析结果添加到 previewUrls 数组中。

需要注意的是，在使用 FileReader 对象时，必须在 readAsDataURL 方法之后，通过 onload 回调函数处理读取完成后返回的内容。

最后，当文件列表和预览列表都准备好了，我们可以使用 Vue 的 v-for 指令，在页面上渲染所有的预览链接，并以相应文件的index作为其key值进行区分展示，图片预览相关内容在 v-for 循环内展示出来以实现动态渲染。

设置图片不变形，超出部分隐藏
要设置图片不变形、超出部分隐藏，可以使用 CSS 的 object-fit 和 object-position 属性。object-fit 属性用于指定当图片尺寸与容器尺寸不同时如何调整图片大小，而 object-position 属性则用于指定图片在容器中显示的位置。

以下是一个示例：

<div id="app">
  <input type="file" @change="handleUpload" ref="fileInput" multiple>
  <div v-for="(url, index) in previewUrls" :key="index" class="preview-container">
    <img :src="url" class="preview-image">
  </div>
</div>

<style>
.preview-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
</style>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      files: [],
      previewUrls: []
    };
  },
  methods: {
    handleUpload() {
      const formData = new FormData();
      const files = this.$refs.fileInput.files;
      for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i]);
        if (/^image\//.test(files[i].type)) {
          const reader = new FileReader();
          reader.readAsDataURL(files[i]);
          reader.onload = () => {
            this.previewUrls.push(reader.result);
          };
        }
      }
      axios.post('/upload', formData)
        .then(response => {
          console.log('上传成功');
        })
        .catch(error => {
          console.error('上传失败：', error);
        });
    }
  }
});
</script>

在上述示例中，我们为每个预览容器设置了一个宽度和高度，并通过 overflow: hidden 属性隐藏超出容器范围的部分。而为了让图片填满容器并保持比例不变，我们为图片设置了 width: 100% 和 height: 100% 属性，并使用 object-fit: cover 属性指定将图片等比例缩放以完全覆盖容器。

同时，为了让图片可见区域居中显示，我们还可以使用 object-position: center center 属性来指定其水平和垂直方向上的位置。

上传的同时带上参数，怎么实现？
要在文件上传时同时带上参数，可以使用 FormData 对象的 append() 方法向表单中添加额外的数据。

以下是一个示例：

<div id="app">
  <input type="file" @change="handleUpload" ref="fileInput" multiple>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    handleUpload() {
      const formData = new FormData();
      const files = this.$refs.fileInput.files;
      
      // 向 FormData 中添加 param1 和 param2 参数
      formData.append('param1', 'value1');
      formData.append('param2', 'value2');

      for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i]);
      }
      axios.post('/upload', formData)
        .then(response => {
          console.log('上传成功');
        })
        .catch(error => {
          console.error('上传失败：', error);
        });
    }
  }
});
</script>

在上述示例中，我们使用 formData.append() 将 param1 和 param2 参数添加到表单中，并设置它们的值。在上传文件时，我们把包含所有文件和额外参数的 FormData 对象作为 POST 请求的数据，然后将其提交到服务器上。
要在上传文件时设置允许的文件格式，你可以通过在 input 标签中添加 accept 属性来限制用户输入的文件类型。这个属性的值可以是逗号分隔的 MIME 类型或者文件后缀名，多个类型之间用“|”符号隔开。

以下是一个示例：

<div id="app">
  <input type="file" @change="handleUpload" ref="fileInput" multiple accept=".png,.jpg,.jpeg">
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    handleUpload() {
      const formData = new FormData();
      const files = this.$refs.fileInput.files;
      for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i]);
      }
      axios.post('/upload', formData)
        .then(response => {
          console.log('上传成功');
        })
        .catch(error => {
          console.error('上传失败：', error);
        });
    }
  }
});
</script>