vue+express图片上传

最新推荐文章于 2023-06-04 20:25:50 发布

较高端人类

最新推荐文章于 2023-06-04 20:25:50 发布

阅读量253

点赞数 1

文章标签： vue.js express javascript

本文链接：https://blog.csdn.net/mjjie_/article/details/129700529

版权

本文档介绍了如何使用Vue.js和Express搭建一个图片上传功能。前端部分利用axios发起请求，后端则通过multer库处理图片上传，将图片保存在项目的static/uploadImg目录下。同时，详细讲解了配置utils/upload.js文件以及在路由中如何实现图片上传的逻辑。

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

前端代码

/views/index

<template>
  <div class="classify">
    <h1>首页</h1>
    <!-- <p><input type="file" @change="upload" ref="file" /></p> -->
    <p><input type="file" ref="file" /></p>
    <p><button @click="upload">上传图片</button></p>
    <p>图片回显：</p>
    <img v-if="img" :src="img" alt="" />
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    data() {
      return {
        img: "",
      };
    },
    methods: {
      upload() {
        // 新建表单数据对象，用来存储上传的文件及上传的其它数据
        let param = new FormData();
        //获取图片信息
        let file = this.$refs.file.files[0];
        console.log(file);