element-ui的upload组件为何不生效?

仿照:http://element.eleme.io/#/zh-...,一样的代码,实例网站能生效,我的就是不生效。
翻了墙,http://jsonplaceholder.typico...能正常访问。
我用的本地虚拟站点:http://192.168.0.103:88/test_...这种。
我的代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'>
    <title>demo</title>
    <link rel="stylesheet" href="css/element-ui.css">
    <script src="js/vue2.js"></script>
    <script src="js/element-ui.js"></script>
  </head>
  <body>

    <div id="app">
        <el-upload
          action="http://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :default-file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
        </el-upload>

        <ul >
            <li v-for="item in fileList">{{item.name}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
          el: '#app',
          data: {
            fileList: [{name: 'food1.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
          },
          methods:{
            handleRemove(file, fileList) {
                console.log(file, fileList);
              },
              handlePreview(file) {
                console.log(file);
              }
          }
        })
    </script>
  </body>
</html>

报错信息:
图片描述

另外,我不明白http://jsonplaceholder.typico...这个网站,具体是如何返回我上传的图片地址的?

阅读 13.6k
2 个回答

Element-UI 1.1.1之前的版本不兼容最新的Vue, 同样1.1.1之后的版本也不兼容旧的的Vue.所以最好同时都升级到最新版本

气死我了,,,,把Vue升级了一下版本,居然就解决了。

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