上传参数配置问题

[Mcdull-wei]

大神你好，

我在用 auto-upload 做图片上传的时候是这样写的

        <el-table-column
          prop="coverurl"
          label="书籍封面"
          sortable
          width="180" header-align="center">

          <template slot-scope="scope">
            <!--  <img  :src="scope.row.coverurl" alt="" style="width: 70px;height: 70px">
             -->
            <img-inputer 
                action ="http://localhost:8081/article/uploadimg"  
                headers="{ 'Content-Type': 'multipart/form-data'}" 
                v-model="file" theme="light" size="small" 
                auto-upload 
                :imgSrc="scope.row.coverurl" 
                accept="image/jpeg,image/png"/>
          </template>
        </el-table-column>

然后运行就会提示 XMLHttpRequest cannot load http://localhost:8081/article/uploadimg. Response for preflight is invalid (redirect)
这个提示应该属于跨域问题吧，这个问题怎么解决呢

[Mcdull-wei]

代码另一个地方关于图片上传是这么做的

export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

[waynecz]

看起来是你的服务端对 OPTIONS 请求进行了重定向，浏览器里查看下这个 OPTIONS 请求是否返回重定向了

尝试以下办法解决：

1. 将 localhost 改成 127.0.0.1
2. 服务端对 OPTIONS 请求一律 返回 204

ps：建议代码用代码块包裹 and just google it

[linfang115]

大神你好，请问如何获取到预览的图片地址呢，就是imgPreview这个方法得到的this.result的值。

[waynecz]

@qlfer 预览的图片地址，是指要取到 base64 码吗

[linfang115]

是滴，要把这个base64通过post提交给后台

[waynecz]

@qlfer 可以直接给组件一个 ref

<vue-img-inputer ref="img">

然后代码里

this.$refs.img.dataUrl

源码的图片预览可以看这里

[linfang115]

按着你那样弄了，取到的值是一开始赋值的那个url，不是重新上传的那个

[linfang115]

<user-upload v-if="imageUrl" :imgSrc="imageUrl"  ref="img" accept="image/*" theme="light" @onChange="setFileChange"/>

setFileChange(file, name) {
      console.log(file)
      let imgurl = this.$refs.img.dataUrl
      console.log(imgurl)
    },

大神我加你 qq 了，能帮忙看下吗，谢谢

[waynecz]

@qlfer 你取到的那个 url 就是 base64，另外没理解「取到的值是一开始赋值的那个url，不是重新上传的那个」这句话，最好描述的详细点

PS： 最好粘贴的代码格式整理下

[linfang115]

好滴，我的意思是，一开始从后台取到图片的imageUrl，赋值给组件的imgSrc，现在要更改图片，获取更改后的图片地址，this.$refs.img.dataUrl这个方法获取到的是初始化的图片imageUrl，不是更改后的base64的地址

[waynecz]

@qlfer 我自己测试了下，更改图片后拿到的是新的 base64，是不是哪里姿势错了，你可以写个 demo 吗

[Mr-hans]

你好，，，这个悬着图片后有压缩功能嘛

[waynecz]

@Mr-hans 暂时没有哦

[YaoHuangMark]

imgSrc 后面取项目目录下的图片地址没用吗？

[waynecz]

imgSrc 后面取项目目录下的图片地址没用吗？

@HY0606 有示例代码吗

[YaoHuangMark]

@waynecz <img-inputer auto-upload v-model="file" :imgSrc="'../assets/image/edit.png'" theme="light" size="small" />

[YaoHuangMark]

@waynecz 你 demo 里面的 imgsrc 也是没有显示出图，还是说你那里是没有添加图片的

[waynecz]

@HY0606 Demo 里是图片 CDN 挂了，你需要看下 webpack 编译后你的 assets 文件夹变成什么了，或者用这种方式引入：

import EditPng from '../assets/image/edit.png'

<img-inputer auto-upload v-model="file" :imgSrc="EditPng"/>

[YaoHuangMark]

@waynecz 你这种方式是可以的，非常感谢🙏。 但是我用之前那种路径的方式直接放在一个img中是可以的，放到imgSrc中就不行，没搞明白，我再看看吧。