1.效果图
2.解决方案 在该处是为引用的公司封装的组件，因此可以直接去组件那里调整一下它的宽度。 上传组件
代码语言：javascript复制<template>
<view class="Upload">
<u-upload
style="width: 100rpx;height:100rpx;"
class="upload-box"
:action="baseUrl"
ref="uUpload"
deletable="false"
show-progress="false"
:header="token"
:max-count="count"
@on-error="testE"
@on-remove="onRemove"
@on-uploaded="onUploaded"
:file-list="fileList"
></u-upload>
</view>
</template>
<script>
import {baseUrl} from '../../services/serve.js';
export default {
name: "x-upload",
props: {
count: {
type: String,
}
},
data() {
return {
baseUrl: `${baseUrl}/file/upload/`,
fileList: [],
//添加请求token
token: {
"Content-Type": "application/json",
Cookie:
"Admin-Token=FeFGNw9Bq1ABFRqCohTSizf7FpWj jubouVJAdXwuC4JpZnbUQhG5IyQqxjWgubFzc7RYQW30LThPkdjqkLRUq59bMpSP2CXBodehsW46ubJHQXHkS5pG6GMituRuxAi7BJrcxotT08ZA9yMnCb6cW5JMFoafQWH18EigBfFoXU=",
},
};
},
created() {
console.log("cookies", this.cookies);
},
mounted() {
},
methods: {
testE(res) {
console.log("error", res);
},
onRemove (index, list) {
const lists = list.map((el) => {
return el.response.data.url;
});
console.log(list, 'list');
this.$emit("returnImg", lists);
this.$emit("returnImgList", lists);
},
onUploaded(list) {
const lists = list.map((el) => {
return el.response.data.url;
});
// this.fileList = lists;
console.log("Uploadedlist", lists);
this.$emit("returnImg", lists);
this.$emit("returnImgList",lists);
},
},
};
</script>
<style lang="scss" scoped>
@import "../../static/style/default.scss";
.Upload {
width: 680rpx;
height:auto;
.u-upload {
::v-deep .u-list-item {
height: 50rpx !important;
width: 50rpx !important;
}
}
}
</style>笔者还用的办法就是::v-deep，修改一些组件是有效果的，但是此处并不起作用。
