蓝桥第五课-上传组件的封装调用以及新增、修改商品信息的开发

2022-10-18  本文已影响0人  风中凌乱的男子 
<el-form-item label="图片上传">
    <UploadImg></UploadImg>
</el-form-item>
import UploadImg from '@/components/Common/UploadImg.vue';
components: { UploadImg }

<template>
  <div>

  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

 <el-upload
      class="upload-demo"
      action=""
      :http-request="uploadImgMainImg"
      :file-list="fileList"
      accept="image/png, image/jpeg, image/jpg"
      :limit="limit"
      list-type="picture-card"
      :on-remove="handleRemove"
      :on-change="handleEditChange"
      :class="{ hide: hideUploadEdit }"
    >
      <i slot="default" class="el-icon-plus"></i>
 </el-upload>
image.png
data() {
      return {
        hideUploadEdit:false，//让他默认为false
      }
  },
image.png
data() {
      return {
        fileList: [],，//让他默认为空数组
      }
  },
image.png
data() {
     return {
       limit:1,//让他默认为1，就是只能上传一张图片
     }
 },
image.png
methods: {
      /** 文件移除触发的钩子函数 */
      handleRemove(file,fileList){ 
          
      }
    },
image.png
methods: {
      /** 文件上传触发的钩子函数 */
      handleEditChange(file,fileList){ 
          
      }
    },
image.png
methods: {
      /** 文件上传触发的自定义方法 ,回调file文件对象，在这个方法内执行上传方法 */
      uploadImgMainImg(file){ 
          alert("开始上传")
      }
    },
image.png
image.png
image.png
methods:{
  handleEditChange(file,fileList){
        console.log(file);
        console.log(fileList);
        this.hideUploadEdit = fileList.length>=this.limit
    },
}
image.png
.hide{
  ::v-deep .el-upload--picture-card{
    display: none;
  }
}
image.png
methods:{
   handleRemove(file,fileList){
        console.log(file);
        console.log(fileList);
        this.hideUploadEdit = false
      }
}

cnpm install qiniu-js --save

/**
 * 
 * @returns  获取上传token
 */
export function getQiniuUpToken(params) {
  return request({
    url: '/api/getQiniuUpToken',
    method: 'get',
    params
  })
}

import {getQiniuUpToken} from '@/api/user';
import * as qiniu from 'qiniu-js';
image.png
methods:{
   uploadImgMainImg(file) {
      console.log(file);
      let _this = this;
      let baseUrl;
      let config = { useCdnDomain: true, region: qiniu.region.z0 };
      let putExtra = { fname: file.file.name, params: {}, mimeType: null };
      //开始上传  token 需要找后端获取(单独的方法)
      getQiniuUpToken().then((res) => {
        let upToken = res.data.uploadToken;
        baseUrl = res.data.baseUrl;
        let headers = qiniu.getHeadersForMkFile(upToken);
        //file 是获取到的文件对象
        //key 是文件名字，传null将使用hash值来当作文件名
        let observable = qiniu.upload(
          file.file,
          file.file.name,
          upToken,
          headers,
          putExtra,
          config
        );
        this.subscription = observable.subscribe(observe);
      });
      let observe = {
        next(res) {
          // console.log('已上传大小，单位为字节：' + res.total.loaded)
          // console.log('本次上传的总量控制信息，单位为字节：' + res.total.size)
          // console.log('当前上传进度，范围：0～100：' + res.total.percent);
          console.log(res);
        },
        error(err) {
          // console.log(err.code)
          // console.log(err.message)
          // console.log(err.isRequestError)
          // console.log(err.reqId)
          console.log(err);
        },
        /*完成后的操作*/
        complete(res) {
          //上传成功以后会返回key 和 hash  key就是文件名了！
          console.log(res);
          let fileUrl = baseUrl + res.key;
          _this.$message.success("上传成功");
          console.log(fileUrl);
        },
      };
    },
}
image.png
 complete(res) {
     //上传成功以后会返回key 和 hash  key就是文件名了！
     console.log(res);
     let fileUrl = baseUrl + res.key;
     _this.$message.success("上传成功");
     console.log(fileUrl);
     _this.$emit("onSuccessFun", fileUrl);
},
image.png
<el-form-item label="图片上传">
     <UploadImg @onSuccessFun="handleSuccessFun"></UploadImg>
</el-form-item>

methods:{
  handleSuccessFun(url){
      this.ruleForm.cover = url
  }
}
image.png
image.png
submitForm(formName) {
      // this.$refs.ruleForm
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // alert('submit!');
          // 接口请求
          // console.log(this.ruleForm);
          addShop(this.ruleForm)
            .then((res) => {
              console.log(res);
              this.$message.success("新增成功")
              this.$router.go(-1)
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

methods:{
   handleRemove(file, fileList) {
      console.log(file);
      console.log(fileList);
      this.hideUploadEdit = false;
      this.$emit("onRemoveFun")
    },
}

<el-form-item label="图片上传">
    <UploadImg @onSuccessFun="handleSuccessFun" @onRemoveFun="handleRemoveFun"></UploadImg>
</el-form-item>

handleRemoveFun(){
   this.ruleForm.cover = "";
}
image.png
methods:{
   /** 点击编辑按钮触发的方法 */
    handleUpdate(row){
      this.$router.push("/shopModel/addShop?id="+row._id)
    }
}
image.png
/**
 * 
 * @returns 获取指定商品信息 /api/query/goods/:id
 */
 export function getShopDetail(id) {
  return request({
    url: '/api/query/goods/'+id,
    method: 'get',
  })
}

import { getShopDetail } from "@/api/user";
image.png
mounted() {
    let id = this.$route.query.id
    console.log(id);
  },
image.png
mounted() {
    this.getShopMenuListFun();
    let id = this.$route.query.id
    console.log(id);
    if(id){
      getShopDetail(id).then(res=>{
        console.log(res);
      })
    }
  },
image.png
mounted() {
    this.getShopMenuListFun();
    let id = this.$route.query.id
    console.log(id);
    if(id){
      getShopDetail(id).then(res=>{
        console.log(res);
        this.ruleForm = res.data //将`res.data`赋值给`ruleForm`
      })
    }
  },
image.png
<el-form-item label="图片上传">
     <UploadImg @onSuccessFun="handleSuccessFun"
     @onRemoveFun="handleRemoveFun" 
     ref="uploadCom"></UploadImg>
</el-form-item>
image.png
 mounted() {
    this.getShopMenuListFun();
    let id = this.$route.query.id
    console.log(id);
    if(id){
      getShopDetail(id).then(res=>{
        console.log(res);
        this.ruleForm = res.data
        this.$refs.uploadCom.fileList = [{name:'key.png',url:res.data.cover}]
      })
    }
  },
image.png
mounted() {
    this.getShopMenuListFun();
    let id = this.$route.query.id
    console.log(id);
    if(id){
      getShopDetail(id).then(res=>{
        console.log(res);
        this.ruleForm = res.data
        this.$refs.uploadCom.fileList = [{name:'key.png',url:res.data.cover}]
        this.$refs.uploadCom.hideUploadEdit = true
      })
    }
  },
image.png
import { updateShop } from "@/api/user";
image.png
 <el-form-item>
      <el-button type="primary" v-if="!$route.query.id" @click="submitForm">立即创建</el-button>
      <el-button type="primary" v-if="$route.query.id" @click="submitUpdate">立即修改</el-button>
      <el-button>重置</el-button>
</el-form-item>

methods:{
  submitUpdate(){
    updateShop(this.ruleForm,this.$route.query.id).then(res=>{
        this.$message.success("修改成功");
        this.$router.go(-1)
      })
  }
}
上一篇 下一篇

猜你喜欢

热点阅读