七牛云前端上传时遇到跨域问题怎么解决

使用element-ui和七牛云做一个图片上传的demo,出现跨域问题

clipboard.png
以下是源代码:

<template>
    <el-upload
      class="avatar-uploade"
      :multiple="true"
      :action="actionPath"
      accept="image/jpeg,image/gif,image/png,image/bmp"
      :before-upload="beforeAvatarUpload"
      :data="postData"
      :on-success="handleAvatarSuccess">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>
<script>
    import {genUpToken} from 'assets/js/qiniuToken.js'
    export default {
        name: 'uploadTest',
        data() {
            return {
                actionPath: 'http://upload-z2.qiuniup.com',
                postData: {},
                imageUrl: ''
            }
        },
        methods: {
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
 
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = 'https://portal.qiniu.com/cdn/domain/ppqbjkzai.bkt.clouddn.com' + res.key;
                console.log(this.imageUrl);
            }
        },
        created() {
            var token;
      var policy = {};
      var bucketName = 'xiaoyiqin2011';
      var AK ='1nEjNZstRGp-wygIKvLkVPBbDD5S6PHh7ZT0yt83';
      var SK = 'rpytcnIRvtrmXmfdd83Z0yHCZBHVN3qyISWb4231';
      var deadline = Math.round(new Date().getTime() / 1000) + 3600;
      policy.scope = bucketName;
      policy.deadline = deadline;
      token=genUpToken(AK, SK, policy);
      this.postData.token=token;
        }
    }
</script>

请问是哪里配置错了吗,该怎么解决呢

阅读 5.4k
2 个回答

上传域名写错了,qiniup.com不是qiuniup.com

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
七牛云问答
子站问答
访问
宣传栏