VUE：图片上传

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了VUE：图片上传，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1256字，纯文字阅读大概需要2分钟。

内容图文

vue项目中的图片上传

说明：

• 该操作会使用到 ( axios二次封装 ) 中的内容，需要引入
• 框架为vant

代码及注释：

• 图片上传代码

<script>
import { Toast } from "vant";
import { ApiModel } from "../../assets/js/request/api";
const apimodel = new ApiModel();
export default {
  data() {
    return {
      orderId: null,
      fileList: [],
      file: "",
    };
  },
  methods: {
  //第一步：上传图片获取后端返回的图片地址
    afterRead(file) {
      file.status = "uploading";//上传状态
      file.message = "上传中...";
      
      const fd = new FormData();//构造一个FormData()对象
      fd.append("file", file.file);//存入file
      fd.append("type", "shop");//存入type
      apimodel.images(fd).then((res) => {//连接接口
        this.file = res.data.url;
        console.log(this.file);
        if (this.file !== "") {
          file.status = "done";
          Toast.success("上传成功！");
        }
      });
    },
    //第二步：当图片叉掉时，清空file中的内容
    deleted() {
      this.file = "";
      console.log(this.file, "13s");
    },
    //第三步：点击确认按钮时将file中的图片地址上传
    submit() {
      if (this.file == "") {
        Toast.fail("请上传图片！");
      } else {
        let data = {
          order_id: this.orderId,
          img: this.file,
        };
        apimodel
          .submitResult(data)
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.log(err.data.message);
            Toast.fail(err.data.message);
          });
      }
    },
  },
};
</script>

• api.js

// 图片上传
    images(file) {
        return this.uploader({
            url: '/api/images',
            method: 'POST',
            file,
        })
    }

内容总结

以上是互联网集市为您收集整理的VUE：图片上传全部内容，希望文章能够帮你解决VUE：图片上传所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---