Question

我有这个观点：

<div class="seller_image" :style="{background: 'url(' + user_credentials.avatar +')', backgroundSize: 'cover ', display: 'block'}">

</div>

在vue我有这个：

setAvatar:function(x,y,w,h){
          this.setAvatarLoader = true;
         var data = new FormData();
         this.x1 = $('#x1').val();
         this.y1 = $('#y1').val();
         this.w = $('#w').val();
         this.h = $('#h').val();
         this.x2 = $('#x2').val();
         this.y2 = $('#y2').val();

          data.append('avatar',this.$els.fileAvatarImage.files[0]);
          data.append('x1',this.x1);
          data.append('x2',this.x2);
          data.append('y1',this.y1);
          data.append('y2',this.y2);
          data.append('w',this.w);
          data.append('h',this.h);

          user_id = this.user_credentials.user_id;
          this.$http.post('/profile/' + user_id + '/basic_info/set_avatar',data).then(function(response){
            this.avatarImageSet = false;
            public_path = response.data.public_path;
            url_path = response.data.url_path;
            filename = response.data.filename;
            this.setAvatarLoader = false;
            this.basic_status = true;
            this.basic_success_message = response.data.successMsg;
            this.profile_image = url_path;
            this.user_credentials.avatar = url_path
            this.getAvatar();
            $("html, body").animate({ scrollTop: 0 }, "slow");


          }, function(response) {
              this.setAvatarLoader = false;
              $('#myModal').modal('hide');
                this.getAvatar();
                console.log('error');

          });
        },

当我刷新页面时，我得到了头像，但是当我设置它时，它不会改变图像。

有什么建议吗？

Answer 1

正如@AWolf所说，很难猜出你的代码有什么问题，因为我只能看到你代码库的一部分。

另一个可能的问题可能是url_path。如果它保持不变，永远不会改变。所以，你需要附加时间戳：

this.user_credentials.avatar = url_path + '?' + Date.now()

https://jsfiddle.net/pespantelis/fy0re26m/

Answer 2

正如评论中所提到的，尽量避免使用jQuery，因为大部分时间都不需要jQuery，这会让事情变得更复杂。

请查看以下演示文稿，了解简单的图片上传器/头像更换器或fiddle。

演示只打开文件选择器对话框，然后返回的文件用于更新显示的图像。（在演示中未添加发布到服务器。）

致你的代码：

像$('#x1').val()这样的东西不应该用Vue.js来完成，因为在Vue你正在做那个模型驱动。

因此唯一的事实来源是您的数据模型，而不是DOM中显示的内容。

不确定您尝试使用x1，y1，...代码。从没有html标记的代码片段中可以看出这一点。

＆＃13;

new Vue({
  el: '#app',
  data() {
    return {
      user_credentials: {
        avatar: 'https://unsplash.it/100/100'
      }
    }
  },
  methods: {
    changeAvatar() {
      const input = document.createElement('input');
      let self = this;
      input.setAttribute("type", "file");
      input.addEventListener('change', function(e) {
        // uploading code from this fiddle: http://jsfiddle.net/vacidesign/ja0tyj0f/
        if (this.files && this.files[0]) {
          var reader = new FileReader();
          reader.onload = function(e) {
            // image is loaded callback
            self.user_credentials.avatar = e.target.result;
            // here you can post the data to your backend...
          };
          reader.readAsDataURL(this.files[0]);
        }
      })
      input.click(); // opening dialog

      return false; // avoiding navigation
    }
  }
})

＆＃13;

.seller_image {
  width: 200px;
  height: 200px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
  <div class="seller_image" :style="{background: 'url(' + user_credentials.avatar +')', backgroundSize: 'cover ', display: 'block'}">

  </div>
  <button @click="changeAvatar()">
    Change
  </button>
</div>

＆＃13;

用vue.js更改头像而不刷新？

2 个答案: