关于element上传到七牛云出现500错误到问题
发布于 3 个月前 作者 lockeroots1 656 次浏览 来自 问答

我的需求就是前端提交图片之后,自动上传到七牛云中。

前端提交图片之后出现500错误,请问一下到底哪里出错了。

后端

const router = require('express').Router();
const qiniu = require('qiniu');

qiniu.conf.ACCESS_KEY = 'you key';
qiniu.conf.SECRET_KEY = 'you key';

router.post('/upload', (req,res) => {

    const uptoken = (bucket,key) => {
        let putPolicy = new qiniu.rs.PutPolicy(bucket + ':' + key);
        return putPolicy.token();
    }

    const uploadFile = (uptoken,key,localfile) => {
        qiniu.io.putFile(uptoken, key, localFile, extra, function(err, ret) {
          if(!err) {
            // 上传成功, 处理返回值
            return res.json({
                hash: ret.hash,
                key: ret.key,
                per: ret.persistentId
            });
          } else {
		  // 上传失败, 处理返回代码
            console.log(err);
          }
        });        
    }

    const bucket = 'image';

    const key = req.body.key;

    const token = uptoken(bucket,key,req.files[0].path)

    uploadFile(token,key,req.files[index].path)
})
module.exports = router;

前端

<body>
    <div id="app">
      <el-upload
          action="https://upload.qbox.me"
          :data="dataObj"
          drag
          :multiple="true"
          :before-upload="beforeUpload"
          :on-success='handleSuccess'>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
      </el-upload>
    </div>
 </body>
    <script>
    new Vue({
        el: '#app',
        data:{
            dataObj: { token: '', key: '' },
            image_uri: [],
            fileList: []
        },
        methods:{
		beforeUpload(file) {
                const tath = this;
                const name = file.name;
                const curr = Date.now().toString();
                const key = encodeURI(`${curr}_${name}`);
                return new Promise((resolve,reject) => {
                    axios.post('/api/qiniu/upload',{ key }).then(res => {
                        consoel.log(res.data);
                        that.data.dataObj.token = res.data.token;
                        tath.data.dataObj.key = res.data.key;
                        resolve(true);
                    }).catch(err => {
                        console.log(err);
                        reject(false);
                    })
                });

            },
            handleSuccess() {
                console.log('上传成功')
            }
        }
    })
    </script>
2 回复

图片还没上传到服务器,在服务器还没有文件路径,调用七牛用的是服务器端的文件路径

你是怎么解决的,能把你前后端代码贴出来么?我在这个坑里很久了,依然没有解决

回到顶部