vue图片上传demo

2019独角兽企业重金招聘Python工程师标准>>>

1.vue页面 

引用   import VueImgInputer from 'vue-img-inputer'   组件
展示如下
<div class="prove-list-right">
  <div class="prove-right-img"
  @change="showimgUrl">
    <VueImgInputer
    id="imgjust1"
    v-model="imgUrl"
    theme="light"
    :imgSrc="默认的图"
    :nhe="false"
    noMask>
    </VueImgInputer>
  </div>
</div>

2.js写法

export default {
  name: 'setting',
  data: () => ({
    imgSrc: '默认图片的地址 不支持相对路径',
    imgUrl: ''
  }),
  mounted () {
  },
  methods: {
    // 图片上传后返回地址
    showimgUrl () {
      let formData = new FormData()
      formData.append('file', this.imgUrl)
      formData.append('token', this.$store.state.token.token)
      this.postForm(api.BaseUrl + api.modifyAvatar, formData)
        .then(res => {
          this.$layer.toast({
            content: res.data.message,
            offset: 'auto',
            time: 1000
          })
        })
        .catch(err => {
          this.$layer.toast({
            content: err.data.message,
            offset: 'auto',
            time: 2000
          })
        })
    }
  },
  components: {
    VueImgInputer
  }
}
</script>

3.main.js写法

Vue.prototype.postForm = (urls, datas) => {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      withCredentials: true // 表示跨域请求时是否需要使用凭证
    })
    instance.post(urls, datas).then(response => {
      if (parseInt(response.data.code) === 0) {
        resolve(response)
      } else if (parseInt(response.data.code) === 8001) {
        getToken()
      } else {
        reject(response)
      }
    }).catch(error => {
      reject(error)
    })
  })
}

转载于:https://my.oschina.net/lemonfive/blog/1814141