普歌-智音团队 vue实现图片上传

项目开发中我们会遇到图片上传的需求，那么下面就讲解一下vue如何实现上传图片功能

• 项目需求使用Element-ui的上传组件

• 2.我们还需要云存储（oss）：

  会把我们本地图片上传到云服务器，把图片地址返回给前端，之后前端就可以把数据提交给后端
  

  代码示例

    
      
      
        
          
        
        
        
          
            点击上传
          
          //这里用于图片回显
        
      
      
        取 消
        确 定
      
    

下面是方法部分

export default {
  data() {
    return {
      tableData: [],
      //   添加对话框
      adddialogVisible: false,
      //   添加轮播图表单验证
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 1,
            max: 30,
            message: "长度在 1 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
      pugebanner: {
        bannerUrl:"",
        name: "",
      },
    };
  },
 
  methods: {
    // 添加对话框重置操作
    addDislogClosed() {
      this.$refs.addFormRef.resetFields();
      // 上传组件的重置
      this.$refs["my-upload"].clearFiles();
    },

    // 上传成功后
    handleAvatarSuccess(response) {
      // 把返回的图片路径给到回显部分
      this.pugebanner.bannerUrl = response.data.url;
    },
    // 上传成功前，判断图片大小
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    // 确定按钮
    adduser() {
    //表单验证
      this.$refs.addFormRef.validate((valid) => {
        if (!valid) return;
        //调用自己的api  这里的参数是图片标题和图片路径
        bannerApi
          .addbanner(this.pugebanner)
          .then(() => {
            this.$message.success("添加数据成功");
            this.getBanner();
          })
          .catch(() => {
            this.$message.error("添加数据失败");
          });
        this.adddialogVisible = false;
      });
    },
  },
};

---

相关内容请浏览《export和module.exports的区别》

---

作者：lihaijin8090
本文源自：lihaijin8090的《普歌-智音团队 vue实现图片上传》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。