标签：Toast VUE 上传 file res data 图片

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,
        })
    }

标签：Toast,VUE,上传,file,res,data,图片
来源： https://www.cnblogs.com/cx197/p/14676528.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。